Colour contrast checker
Enter a text colour and a background colour. Get the WCAG contrast ratio, whether it passes at AA and AAA, and the nearest colour that does.
Free · No signup · Runs entirely in your browser — the colours you enter are never uploaded
Contrast calculator
Hex or rgba(), e.g. #14120D or #14120D80.
0 is fully see-through, 100 is solid. See-through text is blended over the background before it is measured.
Hex, e.g. #FCFBF6. It has to be a solid colour: a see-through background has no contrast until you know what is behind it.
Picking a colour from the screen uses the EyeDropper API, which this browser doesn't offer. It is limited to desktop Chrome and Edge (version 95 or later) and desktop Opera (version 81 or later); Firefox, Safari and phone and tablet browsers don't have it. Type or paste the hex value instead.
Large text looks like this
Normal body text looks like this. Contrast is what decides whether someone with low vision can read it at all.
A checkbox outline and a text field outline, drawn in the text colour. Interface edges like these are the 3:1 case.
—
Contrast ratio — shown rounded down to two decimals; pass/fail uses the exact value, so a borderline pair can read 4.49 and fail 4.5:1 by a hair.
Nearest passing colour
If the pair fails, this finds the closest colour that passes. Each suggestion keeps the colour's hue and changes only its lightness, as little as it takes, and is measured again after rounding to a real hex colour, so the number you see is the number you get. See-through text is the one exception: browsers blend transparency a little differently from this page, so a suggestion that leaves the text see-through aims a small margin above the target.
Enter two colours above to see suggestions.
What the thresholds mean
| What it applies to | Level AA | Level AAA |
|---|---|---|
| Normal text (under 18pt, or under 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components and meaningful graphics | 3:1 | No higher requirement |
| Disabled controls and purely decorative graphics | Exempt | Exempt |
These come from WCAG success criteria 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) and 1.4.11 Non-text Contrast.
What this tool can and can't do
This checks one pair of colours you give it: a text or graphic colour, optionally semi-transparent, on one solid background. On its own it can't see your live page, and neither can our site scanner, which reads your HTML but has no way to compute what actually gets painted (what we check). Working out the real contrast of rendered text needs a browser that has already resolved styles, layers, opacity and background images, and any tool that claims to find every contrast problem from HTML alone is guessing.
To measure real rendered text on any page, use our accessibility bookmarklet, which runs the checks in your own browser on the page you are looking at. For text sitting on a photo, gradient or screenshot, use the image contrast checker. Both are free.
For a second opinion, WAVE, axe DevTools and the Silktide toolbar are free and good at this, and WebAIM's contrast checker is a handy cross-check for a single pair. We'd rather point you to the right tool than pretend we are it.
Limits of this checker in particular:
- It uses the WCAG 2.2 contrast ratio formula only. Other methods, such as APCA, give different numbers and are not included.
- Opacity is blended in plain sRGB, the way browsers paint it, but a browser rounds the blended colour to whole 8-bit values in its own way. In Edge that moved the real ratio by up to 0.15, usually by far less, which is why suggestions for see-through text keep a small margin. It does not account for opacity on a parent element, blend modes, filters, text shadows, gradients or images.
- It can't tell you which row applies to your design: whether text counts as large, whether a graphic is needed to understand the page, or whether a control is disabled or purely decorative and so exempt.
- Passing here says nothing about the rest of the page. Contrast is one requirement among many.
Contrast is the part machines are good at
The part they're bad at is judgment — whether your alt text is true, whether your link text means anything out of context. That's what GotAlt was built for.
Check if my alt text is actually rightContrast is one check of many
The free scan runs 16 rule-based WCAG checks on up to 3 pages of your site: missing alt text, form labels, headings, page language, link text and more. No signup.
Scan my site — free