Styling & CSS · Color
Color Contrast
Also called: Contrast ratio, Text contrast, WCAG contrast
The difference in lightness between text and background colors. If it's too small, text is hard to read. Accessibility standards require at least 4.5:1 for body text.
In detail
Contrast is written as a ratio, from 1:1 (identical colors) to 21:1 (black text on white). Level AA of the WCAG accessibility standard requires at least 4.5:1 for normal body text, at least 3:1 for large text (about 24px and up, or about 19px and up in bold), and at least 3:1 for key graphics like icons and input borders.
The most common problem is "classy gray text." Light gray text on white looks refined in a mockup, but in sunlight, on a dim screen, or for users with low vision, it's basically unreadable. Placeholder text and white text on light-colored buttons also often fail.
How to check: select a text element in Chrome DevTools, and the color picker shows the contrast ratio. You can also use an online checker. Check dark mode the same way.
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-contrast- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026