Colour contrast checker
Check text and background colours against WCAG AA and AAA contrast thresholds.
Aa — A clearer view
This is a preview of normal-sized text in your chosen colours.
| Text | WCAG AA | WCAG AAA |
|---|---|---|
| Normal | Pass (4.5:1) | Pass (7:1) |
| Large | Pass (3:1) | Pass (4.5:1) |
Large text: at least 24 CSS px, or 18.67 CSS px when bold. Pass/fail uses the unrounded ratio.
What it does
Check text and background colours against WCAG AA and AAA contrast thresholds.
How to use it
- Choose foreground and background colours using pickers or six-digit hex values. Swap them to preview the reverse combination.
- Results show normal and large text thresholds. Large means at least 24 CSS pixels, or 18.67 CSS pixels when bold.
- Only opaque, solid sRGB colours are supported. A contrast pass alone does not establish that a page is accessible.
Example
Black text on white has a 21:1 contrast ratio and passes AA and AAA for normal and large text.
Methodology
sRGB channels are linearised, combined into relative luminance, and compared using (lighter + 0.05) / (darker + 0.05). Pass/fail uses unrounded values.
Limitations
No transparency, gradients, background images or whole-page audit. The displayed ratio is rounded; classification uses full precision.
Automation
This tool runs in your browser. No upload API or MCP endpoint is available.
View capabilities and documentationReference updated
Join the conversation
Helpful tips, questions, and ideas for making this tool better.
Loading discussion…