Color Contrast Checker
Test any colour pair against WCAG AA and AAA contrast ratios for accessibility.
Check Colour Contrast Against WCAG AA and AAA
Contrast ratio measures the difference in relative luminance between two colours, on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines set 4.5:1 as the minimum for body text, which is not an arbitrary number — it is roughly the point at which text stays readable for someone with 20/40 vision or moderate colour vision deficiency.
Failing contrast is one of the most common and most easily fixed accessibility problems on the web. This checker tests any pair instantly and, when a pair fails, finds the nearest lightness of your own hue that would pass — so you fix the problem without abandoning your brand colour.
Key features
- Every WCAG threshold — AA and AAA for normal and large text, plus the 3:1 rule for UI components.
- Live text sample — see the real pairing at heading and body size, not just a number.
- Accessible suggestion — when a pair fails, the tool finds a passing colour at the same hue and applies it in one click.
- Flexible input — colour pickers or typed HEX, rgb() and hsl() values.
- Swap — test the reverse pairing instantly, since contrast is symmetric but design intent is not.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Color Contrast Checker
- Set your text and background colours
Use the pickers or paste values directly. - Read the ratio
The large figure is the contrast ratio. The table shows which WCAG levels it passes. - Judge against the right threshold
Body text needs 4.5:1. Large text — 18pt, or 14pt bold — only needs 3:1. Icons and form borders also need 3:1. - Apply the suggestion if it fails
The tool proposes the closest passing colour at your hue, so the fix stays on-brand.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1. Non-text elements that convey meaning — icons, input borders, focus rings — need 3:1 under WCAG 2.1.
Does contrast matter for a dark theme too?
Equally. The ratio is symmetric, so light-on-dark is judged the same way. Dark themes often fail with mid-grey body text, which looks subtle in a design tool but is genuinely hard to read.
Why does my brand colour fail on white?
Saturated mid-tones — most oranges, yellows and light greens — sit at a luminance close to white. They read as vivid but not as contrasting. Use a darker variant of the same hue for text and keep the bright version for fills and accents.
Is contrast enough for accessibility?
No, it is one requirement among many. Never use colour alone to convey meaning, keep focus indicators visible, ensure the page works at 200% zoom, and test with a keyboard and a screen reader.