Normal text sample – The quick brown fox.
Large text sample (18pt+)
–
Contrast ratio
| Standard | Level | Min ratio | Result |
|---|---|---|---|
| Normal text | WCAG AA | 4.5:1 | – |
| Large text (≥18pt / ≥14pt bold) | WCAG AA | 3:1 | – |
| Normal text | WCAG AAA | 7:1 | – |
| Large text (≥18pt / ≥14pt bold) | WCAG AAA | 4.5:1 | – |
How to use the Contrast Checker
- Use the color pickers or enter HEX codes for the foreground (text) and background colors.
- The contrast ratio and WCAG compliance results update instantly.
- Use Swap to switch foreground and background.
WCAG contrast requirements
| Standard | Text type | Minimum ratio |
|---|---|---|
| WCAG AA | Normal text | 4.5:1 |
| WCAG AA | Large text (≥18pt or ≥14pt bold) | 3:1 |
| WCAG AAA | Normal text | 7:1 |
| WCAG AAA | Large text | 4.5:1 |
WCAG 2.1 Level AA is the legal minimum for most accessibility regulations (EU, UK, USA). Level AAA is the improved standard.
How the contrast ratio is calculated
Relative luminance (L) is calculated from sRGB channels after gamma linearization: L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
Why contrast matters
About 300 million people worldwide have color vision deficiency, and many more have reduced vision due to aging, bright sunlight, or low-quality screens. Sufficient contrast ensures text is readable across all these conditions.
Common failures: light gray text on white background, yellow text on white, low-contrast placeholder text in input fields.
Tips for passing WCAG AA
- Dark blue (
#003087) or very dark gray (#333333) on white easily pass 4.5:1 - If your brand color is light, use it for backgrounds and pair with dark text
- Avoid using color alone to convey information, add icons or patterns