Accessible color
How to check color contrast
Color contrast measures the difference in relative luminance between a foreground and its background. For text, the resulting ratio helps you check common WCAG AA and AAA thresholds.
Open the color contrast checkerCheck the actual text and background colors
- Identify the computed text color, not only the design token name.
- Identify the final background directly behind the text.
- If either color is transparent, composite it over the real background first.
- Enter the two opaque sRGB colors into a contrast checker.
- Compare the ratio with the threshold for the text’s size and weight.
The contrast ratio ranges from 1:1 for identical luminance to 21:1 for black against white. A higher number means a stronger light-dark difference, but it does not describe hue difference.
Understand common text thresholds
| Text | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Large text means at least 18pt, which is 24 CSS px, or at least 14pt, about 18.67 CSS px, when bold. Do not treat all headings as large text without checking their computed size and weight.
Pass or fail should be based on the unrounded ratio. A displayed 4.50:1 value may be rounded from slightly below the threshold.
How the ratio is calculated
Each sRGB channel is linearized, then combined into relative luminance. The lighter and darker luminance values are compared with this formula:
Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
You normally do not need to calculate this by hand. The formula explains why two colors that look different in hue can still have weak text contrast if their luminance is similar.
Fix a color pair that fails
- Darken the text or lighten the background, or reverse that adjustment for light text.
- Increase font size or weight only if the text genuinely qualifies as large text.
- Avoid placing essential text directly over a photo or changing background.
- Test hover, disabled, placeholder, error, and selected states separately.
- Do not rely on color alone to communicate status or instructions.
A passing pair is one part of accessibility, not a complete page audit. Focus visibility, semantics, zoom, motion, keyboard use, and non-text contrast also matter.
Check a pair with ToolPixels
The free Color Contrast Checker accepts two opaque HEX colors, calculates their contrast ratio, and reports the common AA and AAA results for normal and large text.