Color contrast checker
Test any text and background combination against the WCAG 2.1 contrast rules. The pass/fail indicators mirror what an auditor would write up. If you fail, the suggested color is the closest hue to your original that meets the AA threshold.
The quick brown fox jumps over the lazy dog
A second line of body copy, sized about the way you would actually use it on a marketing page.
Smaller helper text — usually the first thing to fail.
Contrast ratio
7.81:1
AA · normal text (4.5:1)
AA · large text (3:1)
AAA · normal text (7:1)
AAA · large text (4.5:1)
1.4.11 · UI components (3:1)
What the WCAG contrast rules actually say
WCAG 2.1 has two relevant criteria. 1.4.3 Contrast (Minimum) at Level AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text — which the spec defines as 18 point or 14 point bold. 1.4.6 Contrast (Enhanced) at Level AAA pushes those numbers to 7:1 and 4.5:1. A separate criterion, 1.4.11 Non-text Contrast, requires 3:1 for UI components like form borders and focus rings.
The math is fixed and well-documented: convert each color to its relative luminance using sRGB, take (lighter + 0.05) / (darker + 0.05), and compare to the threshold. This tool runs that calculation in your browser — no API call, no logging.
Common mistakes
- Using brand red on white for sale prices — most fail 4.5:1.
- Light gray placeholder text (#999) on white only hits 2.8:1.
- Focus rings styled with the same brand color as text fail 3:1 against the page background.
- Disabled-state UI is sometimes lower than 3:1; that is allowed, but make sure adjacent labels still pass.