A bright yellow, black text passes AA
What color is yellow?
The CSS named color yellow is #ffff00, or rgb(255 255 0): a bright yellow in plain words. Black text on it reaches 19.56:1, passing WCAG AAA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | yellow |
| Hex | #ffff00 |
| RGB | rgb(255 255 0) |
| HSL | hsl(60 100% 50%) |
| OKLCH | oklch(96.8% 0.211 109.8) |
| Nearest Tailwind color | yellow-300 #ffdf20, 0.081 away in OKLab |
| White text | 1.07:1: AA fails, AAA fails, large text fails |
| Black text | 19.56:1: AA passes, AAA passes, large text passes |
About yellow
A bright yellow is the plain description of yellow: OKLCH lightness 96.8%, chroma 0.211, hue 109.8 degrees. CSS Color 4 counts it among the 16 names that came from the VGA palette and then HTML; most of the other names came from the X11 color system.
Its HSL lightness, 50%, says little about how light yellow looks; OKLCH, made to match the eye, measures 96.8%, 47 points away. No CSS keyword matches it; greenyellow (#adff2f) is the nearest, 0.098 away in OKLab, a clear step off.
Black text on yellow measures 19.56:1, past the 7:1 of WCAG AAA, while white text manages only 1.07:1. Its neighbors in the hue-sorted list of names are lightgoldenrodyellow and beige.
The closest Tailwind 4.3.3 color is yellow-300, 0.081 away in OKLab, so bg-yellow-300 comes near; bg-[#ffff00] gives the color itself.
Tints and shades
- #feffe5
- #feffca
- #feffac
- #feff8b
- #feff61
- #ffff00
- #c8c800
- #949400
- #636300
- #363600
- #0f0f00
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #ffff00
- #8479f2
- #181d03
- #dbabb5
- #00705c
Recolor's generator, with yellow locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #8479f2, #181d03, #dbabb5, #00705c. Open it in Recolor.
Using yellow
As a text color, yellow on a black page gives the same 19.56:1.
.notice {
background-color: yellow; /* #ffff00 */
color: black; /* 19.56:1 */
}Common questions
Does white text pass WCAG AA on yellow?
No. White text measures 1.07:1 on yellow, under AA's 4.5:1; black text measures 19.56:1 and passes.
Can yellow be written in OKLCH?
Yes: oklch(96.8% 0.211 109.8), computed from #ffff00. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to yellow?
No. The nearest, greenyellow (#adff2f), is 0.098 away in OKLab, a different color.