40
Total shades
in database
0
Pass AA on white
0% of shades
0
Pass AAA on white
0% of shades
40
Pass AA on black
100% of shades
WCAG AA Score
Shades passing 4.5:1 on white
0 of 40 Yellow 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
0 of 40 Yellow shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Yellow shade as a background, use these text colors for WCAG AA compliance.
Dark text works on:
Recommended Backgrounds
When using a Yellow shade as text color, these backgrounds provide WCAG AA compliance.
Automated Accessibility Validation — All Yellow Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Ivory | #FFFFF0 | WCAG Fail1.0:1 | WCAG AAA20.8:1 | Text on black |
| Pale Yellow | #FFFFE0 | WCAG Fail1.0:1 | WCAG AAA20.6:1 | Text on black |
| Light Yellow | #FFFFE0 | WCAG Fail1.0:1 | WCAG AAA20.6:1 | Text on black |
| Cream | #FFFDD0 | WCAG Fail1.0:1 | WCAG AAA20.2:1 | Text on black |
| Canary Yellow | #FFFF99 | WCAG Fail1.1:1 | WCAG AAA20.0:1 | Text on black |
| Cornsilk | #FFF8DC | WCAG Fail1.1:1 | WCAG AAA19.7:1 | Text on black |
| Light Goldenrod | #FAFAD2 | WCAG Fail1.1:1 | WCAG AAA19.7:1 | Text on black |
| Pastel Yellow | #FDFD96 | WCAG Fail1.1:1 | WCAG AAA19.7:1 | Text on black |
| Daffodil | #FFFF31 | WCAG Fail1.1:1 | WCAG AAA19.6:1 | Text on black |
| Yellow | #FFFF00 | WCAG Fail1.1:1 | WCAG AAA19.6:1 | Text on black |
| Neon Yellow | #FFFF00 | WCAG Fail1.1:1 | WCAG AAA19.6:1 | Text on black |
| Lemon | #FFF44F | WCAG Fail1.1:1 | WCAG AAA18.3:1 | Text on black |
| Aureolin | #FDEE00 | WCAG Fail1.2:1 | WCAG AAA17.4:1 | Text on black |
| Champagne | #F7E7CE | WCAG Fail1.2:1 | WCAG AAA17.3:1 | Text on black |
| Bisque Yellow | #FFE4B5 | WCAG Fail1.2:1 | WCAG AAA17.0:1 | Text on black |
| Corn Yellow | #FBE870 | WCAG Fail1.2:1 | WCAG AAA16.9:1 | Text on black |
| Khaki | #F0E68C | WCAG Fail1.3:1 | WCAG AAA16.4:1 | Text on black |
| Golden Yellow | #FFDF00 | WCAG Fail1.3:1 | WCAG AAA15.8:1 | Text on black |
| Mellow Yellow | #F8DE7E | WCAG Fail1.3:1 | WCAG AAA15.7:1 | Text on black |
| Mustard | #FFDB58 | WCAG Fail1.4:1 | WCAG AAA15.5:1 | Text on black |
| Dandelion | #F0E130 | WCAG Fail1.4:1 | WCAG AAA15.5:1 | Text on black |
| Butter | #F0DC82 | WCAG Fail1.4:1 | WCAG AAA15.3:1 | Text on black |
| Naples Yellow | #FADA5E | WCAG Fail1.4:1 | WCAG AAA15.3:1 | Text on black |
| Champagne Gold | #FAD6A5 | WCAG Fail1.4:1 | WCAG AAA15.2:1 | Text on black |
| Flaxen | #EEDC82 | WCAG Fail1.4:1 | WCAG AAA15.2:1 | Text on black |
| Gold | #FFD700 | WCAG Fail1.4:1 | WCAG AAA15.0:1 | Text on black |
| Pear Yellow | #D1E231 | WCAG Fail1.4:1 | WCAG AAA14.6:1 | Text on black |
| Sunshine | #FFD300 | WCAG Fail1.4:1 | WCAG AAA14.6:1 | Text on black |
| Cyber Yellow | #FFD300 | WCAG Fail1.4:1 | WCAG AAA14.6:1 | Text on black |
| Straw | #E4D96F | WCAG Fail1.4:1 | WCAG AAA14.4:1 | Text on black |
| Citrine | #E4D00A | WCAG Fail1.6:1 | WCAG AAA13.3:1 | Text on black |
| Jonquil | #F4CA16 | WCAG Fail1.6:1 | WCAG AAA13.3:1 | Text on black |
| Forsythia | #EDAA00 | WCAG Fail2.0:1 | WCAG AAA10.3:1 | Text on black |
| Old Gold | #CFB53B | WCAG Fail2.0:1 | WCAG AAA10.3:1 | Text on black |
| Dark Khaki | #BDB76B | WCAG Fail2.1:1 | WCAG AAA10.2:1 | Text on black |
| Vegas Gold | #C5B358 | WCAG Fail2.1:1 | WCAG AAA10.0:1 | Text on black |
| Goldenrod | #DAA520 | WCAG Fail2.2:1 | WCAG AAA9.4:1 | Text on black |
| Antique Gold | #B5A642 | WCAG Fail2.5:1 | WCAG AAA8.5:1 | Text on black |
| Dark Goldenrod | #B8860B | WCAG AA Large3.3:1 | WCAG AA6.5:1 | Text on black |
| Dark Yellow | #9B870C | WCAG AA Large3.6:1 | WCAG AA5.9:1 | Text on black |
Accessibility Notes
- 1
Pure yellow (#FFFF00) achieves only 1.07:1 contrast on white — nearly invisible text. Avoid yellow text on white entirely.
- 2
Dark yellows/golds (700–900) can pass WCAG AA on white. These shades are more brown/amber than pure yellow.
- 3
Yellow on black is highly effective — #FACC15 achieves approximately 11:1 on black, passing AAA.
- 4
Light yellow backgrounds (#FEFCE8, #FEF9C3) with dark text are accessible and widely used for highlight and callout UI.
- 5
Yellow is associated with caution/warning in most UI systems; use it consistently to avoid confusion.
- 6
Tritanopia (blue-yellow color blindness) affects ~0.01% of the population; yellows appear faded but are still distinguishable from blues.
Design Examples
CARD WITH YELLOW BACKGROUND
Card heading
A card component using Ivory as the background. Dark text ensures readability.
Design Tips
- ✓
Yellow backgrounds with black text (#000000) are the standard for high-visibility warnings — think construction signs.
- ✓
Use #713F12 or #854D0E for dark gold/amber text that passes WCAG AA on white.
- ✓
For highlight effects, use a light yellow (#FEF08A) behind dark text on white pages — the contrast difference creates an accessible callout.