7 min read
2026-01-20
The contrast between text and background directly affects readability. According to WHO, over 2 billion people have vision impairments. Proper contrast makes your site accessible to everyone.
Web Content Accessibility Guidelines define minimum contrast requirements:
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text is 18pt (24px) or 14pt (18.66px) bold and above.
The ratio is determined by the relative luminance of the lighter color to the darker one. Range: from 1:1 (no contrast) to 21:1 (black on white).
Enter the text color (HEX, RGB, or pick with the eyedropper)
Enter the background color
Get the contrast ratio and WCAG AA/AAA rating
Gray text on a white background (#999 on #fff = 2.85:1 — fails)
Colored text on a colored background without checking
Ignoring contrast on mobile devices
See also: Color Wheel, Color Blender, Color Converter