Contrast Checker — WCAG Color Contrast
Check the contrast ratio between text and background colors against WCAG AA/AAA and see the result instantly.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Calculated locally
Safe for unreleased branding
No account
Secure connection
How it works
- 1
Set the text colour
Paste the HEX code of the foreground, or pick it from the swatch.
- 2
Set the background colour
Do the same for whatever sits behind the text — the actual background, not white by default.
- 3
Read the result
The ratio and the pass or fail for each WCAG level appear together, with live sample text.
Why use this tool
A number, not an opinion
Contrast is a measurable ratio between 1:1 and 21:1. The tool computes it, so "looks fine to me" stops being the deciding argument.
All thresholds at once
AA and AAA, for normal and large text, evaluated together — you see immediately which uses a pair is safe for.
Live preview
Real text rendered in the pair you are testing, so the number and the appearance are checked side by side.
Fix it in the tool
Adjust either colour and the ratio updates as you go, so you can find the nearest passing shade instead of guessing.
Nothing is uploaded
The calculation is arithmetic in your browser — no colour values are sent anywhere.
Free with no account
No sign-up, no limit, and no watermark on anything.
What the contrast ratio actually measures
The ratio compares the relative luminance of two colours — how much light each one reflects or emits, weighted for how sensitive human vision is to red, green and blue. It runs from 1:1, where the two colours are identical and text is invisible, to 21:1, which is pure black on pure white. Crucially it measures lightness difference and not hue difference: a saturated red and a saturated green of similar lightness sit close to 1:1 and are nearly unreadable together, even though they look maximally different to someone with typical colour vision. This is why "these two colours contrast strongly" is an unreliable judgement and why the formula exists.
The thresholds, and which one applies to you
WCAG defines two conformance levels. Level AA, the one most organisations and most legal requirements target, asks for 4.5:1 for normal body text and 3:1 for large text — large meaning 18pt, or 14pt when bold. Level AAA raises those to 7:1 and 4.5:1 and is realistic for body copy in a documentation site but usually not for a brand-led marketing page. Two things trip people up. First, the large-text allowance is generous enough that a heading can pass while the paragraph beneath it, in the same colour, fails. Second, interface components and meaningful graphics — a form border, an icon that carries information — have their own 3:1 requirement, which colour-checking only the text will miss entirely.
Why brand colours fail this test so often
Brand palettes are chosen for character on large surfaces, not legibility at 16 pixels. Mid-tone colours are the usual casualty: a brand orange, teal or lime that looks confident as a button fill often lands between 2:1 and 3:1 against white, which passes nothing. The instinct is to argue with the number, and the number does not move. The productive response is to keep the brand colour where it works — fills, borders, large display type — and derive a darker variant for body text by lowering the lightness in HSL until the ratio clears, which the colour converter makes a two-step job. That keeps the hue identity intact while making the text readable.
Grey text is the most common failure on the web
Light grey body text on white became a design convention because it looks calm and expensive on a good monitor in a bright room. Measured, `#999999` on white is about 2.8:1 and fails AA outright; `#767676` is roughly 4.5:1 and is the lightest grey that passes for normal text. The gap between those two hex codes is invisible in a design review and decisive for a reader on a phone in daylight or with slightly reduced vision. If a mockup uses grey text to establish hierarchy, the fix is usually size and weight rather than lightness — a smaller, lighter-weight dark grey reads as secondary without dropping below the threshold.
What the ratio does not tell you
Passing 4.5:1 is a floor, not a guarantee of good typography. The formula ignores font size beyond the large-text bracket, ignores stroke weight — a hairline font at 4.6:1 is harder to read than a medium weight at the same ratio — and ignores the colour pairing itself. Red text on green passes comfortably if the lightness differs enough, and remains a poor choice for the roughly one in twelve men with a red-green colour vision deficiency, because they lose the hue distinction that the rest of the design relies on. Contrast is necessary and not sufficient: clear it first, then judge the typography.
Checking text over images and gradients
The formula takes two solid colours, and text placed over a photograph or a gradient does not have one background — it has a different one behind every letter. The practical approach is to test against the lightest and the darkest point the text actually crosses; if either fails, the layout needs help rather than a different text colour. The usual fixes are a semi-transparent overlay between image and text, a solid panel behind the text block, or a text shadow — all of which effectively create a controllable background you can then measure. Testing only against the average brightness of the image is what produces headlines that vanish over a bright patch of sky.
Common mistakes to avoid
- Judging contrast by eye on a good monitor in a bright room. That is the most forgiving condition your design will ever face; the reader on a phone in sunlight or with reduced vision is the case the threshold exists for.
- Testing the heading and assuming the body text is fine. Large text clears 3:1 while normal text needs 4.5:1 — the same colour can pass for one and fail for the other on the same page.
- Checking text colours only. Form field borders, focus rings and icons that carry meaning have their own 3:1 requirement, and a text-only audit misses every one of them.
- Measuring text over a photo against the image’s average brightness. Test against the lightest and darkest points the text actually crosses, or add an overlay so there is a single background to measure.
- Treating a pass as the end of the question. 4.5:1 is a floor — a hairline font, a cramped line height or a red-green pairing can still be hard to read at a ratio that technically conforms.
How it compares
| KeroTools | Browser dev tools | Design plugins | |
|---|---|---|---|
| AA and AAA together | Yes | Usually AA only | Varies |
| Normal and large text | Both shown | Sometimes | Usually |
| Works before you build | Yes | No — needs a rendered page | Yes |
| Values sent to a server | Never | No | Depends on the plugin |
| Account or licence | Neither | Neither | Often required |
| Cost | Free | Free | Free / paid |
Features
WCAG ratio calculation
The official relative-luminance formula, not an approximation by eye.
AA and AAA levels
Both conformance levels evaluated, so you know how much headroom a pair has.
Normal and large text
Large text has a lower threshold; both are shown rather than leaving you to remember which applies.
Live sample text
Real characters in the tested pair, which catches problems a bare number does not.
Adjust and re-check instantly
Nudge either colour and watch the ratio move, to find the smallest change that passes.
HEX input
Paste the codes straight from a brand document or stylesheet.
No installation
Nothing to download or install — it works on the web page.
Arabic & RTL friendly
Full interface in eight languages, including right-to-left Arabic.
Secure by default
Served over HTTPS, with no file tracking and no third-party upload.
Who uses it
Front-end developers
Settling a colour question with a measured ratio instead of a design-review debate.
Designers
Finding the nearest passing shade of a brand colour before it reaches a component library.
Accessibility & compliance teams
Documenting which pairs meet AA and which need remediation, with the exact ratios.
Public sector & education
Meeting accessibility requirements that are a legal obligation rather than a preference.
Frequently Asked Questions
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
No. Everything runs locally in your browser — nothing is uploaded, stored, or shared.
Yes — completely free, with no account and no limits.