Contrast Checker
Check text and background colors against WCAG AA and AAA, see a live preview, and get a nearest passing fix if they fall short.
Large heading text
The quick brown fox jumps over the lazy dog. Normal body copy at 16px.
Why contrast matters
Low-contrast text is one of the most common accessibility failures on the web. People with low vision, colour blindness, or anyone reading on a sunlit phone screen all struggle when text sits too close to its background in brightness. The Web Content Accessibility Guidelines (WCAG) turn "readable enough" into a measurable number: the contrast ratio between the text and background luminance.
The thresholds you need to hit
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
"Large" means 24px (18pt) or 18.66px (14pt) bold and above. AA is the level most laws and procurement rules reference; AAA is a stretch goal that is not always achievable for every element, and WCAG itself does not require full AAA conformance across a whole page.
Fixing a failing pair
When a combination falls short, you usually only need to nudge the lighter or darker color a little further apart. This checker suggests the nearest passing text color by walking the lightness up or down until it clears 4.5:1, so you keep the same hue and feel. Pin down your exact values first with the color picker or the HEX to RGB converter, and if you need a whole accessible range from one brand color, generate it with the shade generator.