The quick brown fox jumps over the lazy dog
Contrast Ratio
3.76
to 1
AA NormalFAIL
AAA NormalFAIL
AA LargePASS
AAA LargeFAIL
Color Details
Text Color
White
#fffffftext-white
Background Color
Red 500
#ef4444bg-red-500
WCAG Compliance
| Criterion | Min Ratio | Result |
|---|---|---|
| Normal Text AA | 4.5:1 | FAIL |
| Normal Text AAA | 7:1 | FAIL |
| Large Text AA | 3:1 | PASS |
| Large Text AAA | 4.5:1 | FAIL |
Code Examples
Tailwind CSShtml
<!-- Text color: text-white -->
<!-- Background: bg-red-500 -->
<div class="bg-red-500 p-6 rounded-lg">
<p class="text-white">
Your accessible text here
</p>
</div>Plain CSScss
/* Text: #ffffff on Background: #ef4444 */
.accessible-container {
background-color: #ef4444;
color: #ffffff;
padding: 1.5rem;
border-radius: 0.5rem;
}Use Cases
- Decorative text only (not for body copy)
- Large display headings (36px+) if AA Large passes
- Placeholder or watermark text
Accessible Alternatives
Aa
text-white16.14:1
bg-red-950
Aa
text-white10.02:1
bg-red-900
Aa
text-white8.31:1
bg-red-800
Frequently Asked Questions
Is white text on red 500 accessible?▼
No, this combination fails WCAG AA with a contrast ratio of only 3.76:1, below the 4.5:1 minimum for normal text. However, it does pass for large text (18px+ bold or 24px+).
What is the contrast ratio of white on red 500?▼
The contrast ratio is 3.76:1. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
How can I make white on red 500 accessible?▼
To achieve WCAG AA compliance, try using a darker text shade or a lighter background shade. For example, increasing the contrast by using a darker text color or adjusting the background.
Related Color Pairs
Check Your Own Color Pair
Use our free contrast checker to test any combination of text and background colors.
Open Contrast Checker