Shades of Yellow
← Shades generatorThe brightest hue in the list and the one that loses every contrast test
The luminance formula behind every WCAG contrast ratio weights green at roughly seventy percent of the total, and pure yellow is red and green together at full strength. That is why #FFFF00 measures about 1.07 to 1 against white, and why it is the brightest thing the sRGB gamut can produce short of white itself. That single number explains most of what is difficult here. Every entry in the table below is a high-lightness colour, and the ones with light in the name are barely distinguishable from the page they sit on.
Sort the family by contrast and the range is almost comically narrow. Lightyellow is 1.02 to 1, lemonchiffon 1.06, papayawhip 1.13, khaki 1.28, and gold, the strongest of them, only reaches 1.40. Nothing here clears 3 to 1, let alone 4.5. Yellow is the one family where the usual advice to darken it slightly does not help; you have to go far enough that the result is olive or amber before any of it becomes text.
Every CSS yellow name, with its contrast on white
The 13 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| ivory | #fffff0 | rgb(255, 255, 240) | 1.01:1 | fails |
| lightyellow | #ffffe0 | rgb(255, 255, 224) | 1.02:1 | fails |
| lemonchiffon | #fffacd | rgb(255, 250, 205) | 1.06:1 | fails |
| cornsilk | #fff8dc | rgb(255, 248, 220) | 1.07:1 | fails |
| lightgoldenrodyellow | #fafad2 | rgb(250, 250, 210) | 1.07:1 | fails |
| yellow | #ffff00 | rgb(255, 255, 0) | 1.07:1 | fails |
| beige | #f5f5dc | rgb(245, 245, 220) | 1.11:1 | fails |
| papayawhip | #ffefd5 | rgb(255, 239, 213) | 1.13:1 | fails |
| palegoldenrod | #eee8aa | rgb(238, 232, 170) | 1.25:1 | fails |
| khaki | #f0e68c | rgb(240, 230, 140) | 1.28:1 | fails |
| gold | #ffd700 | rgb(255, 215, 0) | 1.40:1 | fails |
| darkkhaki | #bdb76b | rgb(189, 183, 107) | 2.07:1 | fails |
| olive | #808000 | rgb(128, 128, 0) | 4.20:1 | AA large |
Nowhere is the improvised origin of these names clearer. Lightgoldenrodyellow is twenty letters naming a flower, a metal and a hue at once, and it sits within five points of lemonchiffon in every channel. Papayawhip, moccasin and lemonchiffon are fabric and food names for near-whites. Goldenrod itself picked up light, dark and pale relatives, which is more coverage than the whole orange family received.
Tints, shades and tones of #f2c200
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using yellow in an interface
Yellow is a background colour and a highlighter, and almost never a foreground one. It does its best work as a fill behind near-black text, as a selection or annotation wash, and as the alert level between green and red. The failure mode is predictable: yellow text, yellow icons on white, and yellow as one of several chart series where it disappears against the plot area. Give it a dark outline or give it up.
FAQ
- Why is yellow text unreadable on white?
- Because contrast in WCAG is computed from relative luminance, not from hue, and yellow has the highest luminance of any fully saturated hue. Pure yellow reaches about 1.07 to 1 against white, where 4.5 to 1 is the minimum for normal text. The colour looks strong and the letters still vanish, which is why designers are surprised by it.
- What hex code is gold?
- Gold is #FFD700, rgb(255, 215, 0). It is a fully saturated yellow at hue 51, sitting between yellow and orange, and it is the darkest keyword in this family at roughly 1.40 to 1 against white. That still fails every WCAG threshold, so gold works as a fill or a border and not as a label.
- What is the difference between a tint and a tone of yellow?
- A tint mixes yellow toward white, which barely changes anything here because yellow already sits near the top of the lightness range. A tone mixes it toward grey, dropping saturation, and that is the operation producing the useful part of the family: khaki, muted sand yellows, and anything you would call buff. Shades, mixed toward black, turn yellow into olive quickly.
