Contrast Checker
Check the contrast ratio between a text and background colour against WCAG AA and AAA levels, with a live preview and instant pass/fail for normal and large text. Runs in your browser.
Large text sample
Normal body text sample, the quick brown fox jumps over the lazy dog.
WCAG contrast
Contrast ratio is the difference in relative luminance between two colours, from 1:1 (identical) to 21:1 (black on white). The WCAG accessibility guidelines set minimums: AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold); AAA needs 7:1 and 4.5:1. Higher is easier to read.
Everything is calculated in your browser; nothing is uploaded.
What this does
A contrast checker measures the contrast ratio between a text and background colour and checks it against WCAG AA and AAA levels.
How to use it
- Pick a text colour.
- Pick a background colour.
- Read the contrast ratio.
- Check the AA/AAA pass or fail.
How it works
The ratio compares the relative luminance of the two colours, from 1:1 (identical) to 21:1 (black on white). AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
ratio = (L1 + 0.05) ÷ (L2 + 0.05)
Understanding your result
The ratio runs from 1:1 to 21:1, and the pass or fail badges tell you whether the pair meets WCAG. Aim for at least 4.5:1 for normal text and 3:1 for large text to clear AA; 7:1 and 4.5:1 clear the stricter AAA. If it fails, darken the text or lighten the background until it passes.
Example
Black on white scores 21:1, comfortably passing AA and AAA.
Sources & methodology
Last updated .
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (about 18pt, or 14pt bold). AAA is stricter at 7:1 and 4.5:1. Higher ratios are easier to read.
How is the ratio calculated?
It compares the relative luminance of the two colours using the WCAG formula, giving a value from 1:1 (identical) up to 21:1 (black on white).
Is my data private?
Yes. The contrast is calculated entirely in your browser; nothing is uploaded.
Related tools
Color Converter
Convert a colour between HEX, RGB and HSL. Type any format or pick from the swatch and copy the others instantly, with a live preview. Fast and private, all in your browser.
Gradient Generator
Build CSS linear and radial gradients with as many colour stops as you like, an adjustable angle and a live preview. Copy the ready-to-use background value. Private and in-browser.
Color Palette Generator
Build harmonious colour palettes from any base colour using complementary, analogous, triadic, tetradic or monochromatic harmony. Each swatch shows a readable hex code, copy in your browser.
JSON Formatter
Pretty-print, validate and minify JSON, with selectable indentation and optional recursive key sorting. Syntax errors are pinpointed by line and column. Fast and private, all in your browser.