41
Total shades
in database
22
Pass AA on white
54% of shades
12
Pass AAA on white
29% of shades
19
Pass AA on black
46% of shades
WCAG AA Score
Shades passing 4.5:1 on white
22 of 41 Red shades achieve at least 4.5:1 contrast on white — the WCAG AA threshold for normal body text.
WCAG AAA Score
Shades passing 7:1 on white
12 of 41 Red shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Red shade as a background, use these text colors for WCAG AA compliance.
White text works on:
Dark text works on:
Recommended Backgrounds
When using a Red shade as text color, these backgrounds provide WCAG AA compliance.
Works on white / light:
Automated Accessibility Validation — All Red Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Pale Red | #FF8080 | WCAG Fail2.4:1 | WCAG AAA8.7:1 | Text on black |
| Coral | #FF7F50 | WCAG Fail2.5:1 | WCAG AAA8.4:1 | Text on black |
| Salmon | #FA8072 | WCAG Fail2.5:1 | WCAG AAA8.4:1 | Text on black |
| Light Coral | #F08080 | WCAG Fail2.6:1 | WCAG AAA8.1:1 | Text on black |
| Watermelon | #FC6C85 | WCAG Fail2.8:1 | WCAG AAA7.6:1 | Text on black |
| Hot Coral | #FF6B6B | WCAG Fail2.8:1 | WCAG AAA7.6:1 | Text on black |
| Tomato | #FF6347 | WCAG Fail3.0:1 | WCAG AAA7.1:1 | Text on black |
| Strawberry | #FC5A8D | WCAG AA Large3.0:1 | WCAG AA7.0:1 | Text on black |
| Terra Cotta | #E2725B | WCAG AA Large3.1:1 | WCAG AA6.8:1 | Text on black |
| Blush Red | #DE5D83 | WCAG AA Large3.5:1 | WCAG AA6.0:1 | Text on black |
| Rose | #FF007F | WCAG AA Large3.8:1 | WCAG AA5.6:1 | Text on black |
| Poppy | #E35335 | WCAG AA Large3.8:1 | WCAG AA5.5:1 | Text on black |
| Scarlet | #FF2400 | WCAG AA Large3.8:1 | WCAG AA5.5:1 | Text on black |
| Candy Red | #FF0038 | WCAG AA Large4.0:1 | WCAG AA5.3:1 | Text on black |
| Indian Red | #CD5C5C | WCAG AA Large4.0:1 | WCAG AA5.3:1 | Text on black |
| Red | #FF0000 | WCAG AA Large4.0:1 | WCAG AA5.3:1 | Text on black |
| Vermilion | #E34234 | WCAG AA Large4.1:1 | WCAG AA5.1:1 | Text on black |
| Amaranth | #E52B50 | WCAG AA Large4.4:1 | WCAG AA4.8:1 | Text on black |
| Cherry | #DE3163 | WCAG AA Large4.4:1 | WCAG AA4.7:1 | Text on black |
| Raspberry | #E30B5C | WCAG AA4.7:1 | WCAG AA Large4.5:1 | Text on white |
| Brick Red | #CB4154 | WCAG AA4.8:1 | WCAG AA Large4.4:1 | Text on white |
| Crimson | #DC143C | WCAG AA5.0:1 | WCAG AA Large4.2:1 | Text on white |
| Persian Red | #CC3333 | WCAG AA5.1:1 | WCAG AA Large4.1:1 | Text on white |
| Rust | #B7410E | WCAG AA5.6:1 | WCAG AA Large3.8:1 | Text on white |
| Lava Red | #CF1020 | WCAG AA5.6:1 | WCAG AA Large3.8:1 | Text on white |
| Chili Red | #C1312D | WCAG AA5.6:1 | WCAG AA Large3.7:1 | Text on white |
| Cardinal | #C41E3A | WCAG AA5.8:1 | WCAG AA Large3.6:1 | Text on white |
| Venetian Red | #C80815 | WCAG AA6.0:1 | WCAG AA Large3.5:1 | Text on white |
| Firebrick | #B22222 | WCAG AA6.7:1 | WCAG AA Large3.1:1 | Text on white |
| Deep Crimson | #9B1B30 | WCAG AAA8.1:1 | WCAG Fail2.6:1 | Text on white |
| Cranberry | #9C0045 | WCAG AAA8.4:1 | WCAG Fail2.5:1 | Text on white |
| Ruby | #9B111E | WCAG AAA8.4:1 | WCAG Fail2.5:1 | Text on white |
| Carmine | #960018 | WCAG AAA9.1:1 | WCAG Fail2.3:1 | Text on white |
| Garnet | #733635 | WCAG AAA9.1:1 | WCAG Fail2.3:1 | Text on white |
| Wine | #722F37 | WCAG AAA9.7:1 | WCAG Fail2.2:1 | Text on white |
| Dark Red | #8B0000 | WCAG AAA10.0:1 | WCAG Fail2.1:1 | Text on white |
| Blood Red | #880808 | WCAG AAA10.1:1 | WCAG Fail2.1:1 | Text on white |
| Burgundy | #800020 | WCAG AAA10.8:1 | WCAG Fail1.9:1 | Text on white |
| Maroon | #800000 | WCAG AAA10.9:1 | WCAG Fail1.9:1 | Text on white |
| Barn Red | #7C0A02 | WCAG AAA11.1:1 | WCAG Fail1.9:1 | Text on white |
| Deep Red | #6E1010 | WCAG AAA12.0:1 | WCAG Fail1.7:1 | Text on white |
Accessibility Notes
- 1
Dark reds (700–900 range) consistently pass WCAG AA on white; medium reds (500–600) are often borderline and need individual verification.
- 2
Red is difficult to distinguish for people with protanopia (red-green color blindness). Never rely on red alone to convey meaning — always pair it with icons or text labels.
- 3
Light reds (50–300 range) typically fail WCAG AA on white; reserve them for backgrounds, decorative borders, or large display text.
- 4
Error state UI that uses only red color is non-compliant with WCAG 1.4.1 (Use of Color). Add icons or underlining.
- 5
Red-green pairs are the most common problematic combination for color-blind users — avoid using them as the sole differentiator.
Design Examples
BUTTON COMPONENT
Raspberry — #E30B5C
CARD WITH RED BACKGROUND
Card heading
A card component using Pale Red as the background. Dark text ensures readability.
DARK BACKGROUND CARD
Card heading
Raspberry background with white text — 4.7:1 contrast.
Design Tips
- ✓
Use #991B1B or darker for error text on white backgrounds — these shades exceed 7:1 (AAA).
- ✓
In dark-mode UIs, #EF4444 and #F87171 can achieve AA contrast on near-black backgrounds.
- ✓
For alert banners, combine a light red background (#FEE2E2) with dark red text (#991B1B) for a high-contrast, visually harmonious result.