Free WCAG Contrast Checker
Normal text preview
The quick brown fox jumps over the lazy dog — normal size body text.
Large text — 24 px bold
Something not working? Report a problem
About the Contrast Checker
Check foreground/background colour contrast against WCAG 2.1 AA and AAA — live preview text on the chosen background with a one-click fix for failing combinations.
How to use the Contrast Checker
- 1Pick a foreground (text) colour and a background colour using the colour pickers or by typing a hex value.
- 2The contrast ratio and WCAG AA/AAA pass/fail badges update instantly.
- 3Use the live preview to see real text samples — normal body text and large/bold headings — on the chosen background.
- 4If the combination fails, click 'Fix to AA' or 'Fix to AAA' to auto-adjust the foreground lightness until it passes.
- 5Use the quick-pair presets to jump to common combinations and explore from there.
Frequently asked questions
What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define a contrast ratio formula based on relative luminance. A ratio of 4.5:1 or higher is required for Level AA compliance for normal text; 7:1 achieves AAA. Large text (18 pt / 14 pt bold) has lower thresholds: 3:1 for AA and 4.5:1 for AAA.
What counts as 'large text'?
WCAG defines large text as at least 18 pt (roughly 24 px) at normal weight, or 14 pt (roughly 18.67 px) at bold weight. The preview shows both normal and large text so you can judge both thresholds at once.
How does the 'Fix' button work?
It nudges the foreground colour's HSL lightness up or down by 1% at a time, alternating directions, until the contrast ratio just clears the target threshold. The first passing value is applied and shown in the suggestion. You can tweak it further from there.
Why should I care about contrast?
Low-contrast text is hard to read for everyone — especially people with visual impairments, in bright sunlight, or on low-quality screens. Passing WCAG AA is often a legal accessibility requirement for public-facing websites and is good design practice regardless.