72
Total shades
in database
40
Pass AA on white
56% of shades
29
Pass AAA on white
40% of shades
32
Pass AA on black
44% of shades
WCAG AA Score
Shades passing 4.5:1 on white
40 of 72 Blue 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
29 of 72 Blue shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Blue 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 Blue shade as text color, these backgrounds provide WCAG AA compliance.
Works on white / light:
Automated Accessibility Validation — All Blue Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Alice Blue | #F0F8FF | WCAG Fail1.1:1 | WCAG AAA19.6:1 | Text on black |
| Electric Blue | #7DF9FF | WCAG Fail1.3:1 | WCAG AAA16.9:1 | Text on black |
| Powder Blue | #B0E0E6 | WCAG Fail1.4:1 | WCAG AAA14.7:1 | Text on black |
| Columbia Blue | #C4D8E2 | WCAG Fail1.5:1 | WCAG AAA14.3:1 | Text on black |
| Non-Photo Blue | #A4DDED | WCAG Fail1.5:1 | WCAG AAA14.1:1 | Text on black |
| Light Blue | #ADD8E6 | WCAG Fail1.5:1 | WCAG AAA13.7:1 | Text on black |
| Periwinkle | #CCCCFF | WCAG Fail1.5:1 | WCAG AAA13.7:1 | Text on black |
| Lavender Blue | #CCCCFF | WCAG Fail1.5:1 | WCAG AAA13.7:1 | Text on black |
| Baby Blue | #89CFF0 | WCAG Fail1.7:1 | WCAG AAA12.3:1 | Text on black |
| Sky Blue | #87CEEB | WCAG Fail1.7:1 | WCAG AAA12.1:1 | Text on black |
| Ice Blue | #99C5C4 | WCAG Fail1.9:1 | WCAG AAA11.1:1 | Text on black |
| Maya Blue | #73C2FB | WCAG Fail1.9:1 | WCAG AAA10.8:1 | Text on black |
| Deep Sky Blue | #00BFFF | WCAG Fail2.1:1 | WCAG AAA9.9:1 | Text on black |
| Deep Sky Blue | #00BFFF | WCAG Fail2.1:1 | WCAG AAA9.9:1 | Text on black |
| Tiffany Blue | #0ABAB5 | WCAG Fail2.4:1 | WCAG AAA8.7:1 | Text on black |
| Cornflower Blue | #6495ED | WCAG Fail3.0:1 | WCAG AAA7.1:1 | Text on black |
| Carolina Blue | #4B9CD3 | WCAG AA Large3.0:1 | WCAG AAA7.0:1 | Text on black |
| Cadet Blue | #5F9EA0 | WCAG AA Large3.0:1 | WCAG AA6.9:1 | Text on black |
| Bright Blue | #0096FF | WCAG AA Large3.1:1 | WCAG AA6.8:1 | Text on black |
| Celestial Blue | #4997D0 | WCAG AA Large3.2:1 | WCAG AA6.6:1 | Text on black |
| Dodger Blue | #1E90FF | WCAG AA Large3.2:1 | WCAG AA6.5:1 | Text on black |
| Bleu de France | #318CE7 | WCAG AA Large3.5:1 | WCAG AA6.0:1 | Text on black |
| Light Slate Blue | #8470FF | WCAG AA Large3.7:1 | WCAG AA5.7:1 | Text on black |
| Air Force Blue | #5D8AA8 | WCAG AA Large3.7:1 | WCAG AA5.7:1 | Text on black |
| Blueberry | #4F86C6 | WCAG AA Large3.8:1 | WCAG AA5.6:1 | Text on black |
| Azure | #0080FF | WCAG AA Large3.8:1 | WCAG AA5.5:1 | Text on black |
| Cool Blue | #4F84C4 | WCAG AA Large3.9:1 | WCAG AA5.4:1 | Text on black |
| Glaucous | #6082B6 | WCAG AA Large3.9:1 | WCAG AA5.4:1 | Text on black |
| Steel Blue | #4682B4 | WCAG AA Large4.1:1 | WCAG AA5.1:1 | Text on black |
| Medium Slate Blue | #7B68EE | WCAG AA Large4.2:1 | WCAG AA5.1:1 | Text on black |
| Periwinkle Flower | #5B7EA6 | WCAG AA Large4.2:1 | WCAG AA5.0:1 | Text on black |
| Brandeis Blue | #0070FF | WCAG AA Large4.4:1 | WCAG AA4.8:1 | Text on black |
| Ultramarine | #4166F5 | WCAG AA4.7:1 | WCAG AA Large4.4:1 | Text on white |
| Cerulean | #007BA7 | WCAG AA4.8:1 | WCAG AA Large4.4:1 | Text on white |
| True Blue | #0073CF | WCAG AA4.8:1 | WCAG AA Large4.3:1 | Text on white |
| Royal Blue | #4169E1 | WCAG AA4.8:1 | WCAG AA Large4.3:1 | Text on white |
| Slate Blue | #6A5ACD | WCAG AA5.3:1 | WCAG AA Large4.0:1 | Text on white |
| Neon Blue | #4D4DFF | WCAG AA5.5:1 | WCAG AA Large3.8:1 | Text on white |
| UCLA Blue | #536895 | WCAG AA5.5:1 | WCAG AA Large3.8:1 | Text on white |
| Sapphire Blue | #0067A5 | WCAG AA6.0:1 | WCAG AA Large3.5:1 | Text on white |
| Sea Blue | #006994 | WCAG AA6.1:1 | WCAG AA Large3.5:1 | Text on white |
| Denim | #1560BD | WCAG AA6.1:1 | WCAG AA Large3.4:1 | Text on white |
| Lapis Lazuli | #26619C | WCAG AA6.4:1 | WCAG AA Large3.3:1 | Text on white |
| Sapphire | #0F52BA | WCAG AAA7.2:1 | WCAG Fail2.9:1 | Text on white |
| Viridian Blue | #0F56A0 | WCAG AAA7.3:1 | WCAG Fail2.9:1 | Text on white |
| Peacock Blue | #005F6A | WCAG AAA7.4:1 | WCAG Fail2.9:1 | Text on white |
| Denim Blue | #2243B6 | WCAG AAA8.3:1 | WCAG Fail2.5:1 | Text on white |
| Yale Blue | #0F4D92 | WCAG AAA8.4:1 | WCAG Fail2.5:1 | Text on white |
| Cobalt Blue | #0047AB | WCAG AAA8.4:1 | WCAG Fail2.5:1 | Text on white |
| Blue | #0000FF | WCAG AAA8.6:1 | WCAG Fail2.4:1 | Text on white |
| Persian Blue | #1C39BB | WCAG AAA8.9:1 | WCAG Fail2.4:1 | Text on white |
| Dark Slate Blue | #483D8B | WCAG AAA9.1:1 | WCAG Fail2.3:1 | Text on white |
| Dark Cornflower Blue | #26428B | WCAG AAA9.4:1 | WCAG Fail2.2:1 | Text on white |
| Egyptian Blue | #1034A6 | WCAG AAA10.2:1 | WCAG Fail2.1:1 | Text on white |
| Klein Blue | #002FA7 | WCAG AAA10.7:1 | WCAG Fail2.0:1 | Text on white |
| International Klein Blue | #002FA7 | WCAG AAA10.7:1 | WCAG Fail2.0:1 | Text on white |
| Indigo Dye | #00416A | WCAG AAA10.7:1 | WCAG Fail2.0:1 | Text on white |
| Smalt | #003399 | WCAG AAA10.9:1 | WCAG Fail1.9:1 | Text on white |
| Medium Blue | #0000CD | WCAG AAA11.2:1 | WCAG Fail1.9:1 | Text on white |
| Marine Blue | #01316E | WCAG AAA12.6:1 | WCAG Fail1.7:1 | Text on white |
| Zaffre | #0014A8 | WCAG AAA12.6:1 | WCAG Fail1.7:1 | Text on white |
| Indigo Blue | #4B0082 | WCAG AAA12.9:1 | WCAG Fail1.6:1 | Text on white |
| Resolution Blue | #002387 | WCAG AAA13.2:1 | WCAG Fail1.6:1 | Text on white |
| Prussian Blue | #003153 | WCAG AAA13.4:1 | WCAG Fail1.6:1 | Text on white |
| Space Cadet Blue | #1D2951 | WCAG AAA14.1:1 | WCAG Fail1.5:1 | Text on white |
| Duke Blue | #00009C | WCAG AAA14.2:1 | WCAG Fail1.5:1 | Text on white |
| Phthalo Blue | #000F89 | WCAG AAA14.7:1 | WCAG Fail1.4:1 | Text on white |
| Midnight Blue | #191970 | WCAG AAA14.8:1 | WCAG Fail1.4:1 | Text on white |
| Dark Blue | #00008B | WCAG AAA15.3:1 | WCAG Fail1.4:1 | Text on white |
| Navy Blue | #001F5B | WCAG AAA15.6:1 | WCAG Fail1.4:1 | Text on white |
| Oxford Blue | #002147 | WCAG AAA16.1:1 | WCAG Fail1.3:1 | Text on white |
| Federal Blue | #060270 | WCAG AAA16.8:1 | WCAG Fail1.3:1 | Text on white |
Accessibility Notes
- 1
Dark blues (700–900) reliably exceed WCAG AAA on white — some achieving 15:1+ contrast ratios.
- 2
Mid blues (500–600) pass WCAG AA and are safe for body text, links, buttons, and interactive states.
- 3
Light blues (50–300) fail AA on white for text; use them for backgrounds, borders, and decorative elements.
- 4
Blue is challenging for people with tritanopia (blue-yellow blindness, ~0.01% of population) and some forms of monochromacy.
- 5
Link text should use a blue that passes at least 3:1 contrast with surrounding text color (WCAG 1.4.1) — not just the background.
Design Examples
TEXT ON WHITE BACKGROUND
Blue
This body text uses Ultramarine — contrast 4.73:1
Example link in UltramarineBUTTON COMPONENT
Ultramarine — #4166F5
CARD WITH BLUE BACKGROUND
Card heading
A card component using Alice Blue as the background. Dark text ensures readability.
DARK BACKGROUND CARD
Card heading
Ultramarine background with white text — 4.7:1 contrast.
Design Tips
- ✓
For body copy links on white: #1D4ED8 or darker. For headers: any shade from 700 up.
- ✓
Primary blue (#2563EB) passes WCAG AA on white and is the most commonly used accessible blue for CTA buttons.
- ✓
Navy (#1E3A8A) achieves AAA on white and is the go-to for professional headers and footer text.