WCAG Contrast Checker

Test a colour pair against WCAG AA and AAA — with the ratio computed, not guessed.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

Contrast ratio is defined by WCAG as the relationship between the relative luminance of two colours, on a scale from 1:1 (identical) to 21:1 (black on white). This tool computes it with the published formula, which converts each channel from sRGB to linear light before weighting them — green counts for far more than blue, because human vision is built that way.

That weighting is why intuition fails here. A pale yellow on white looks like reasonable contrast and scores around 1.4:1; a mid-blue on white looks weaker and scores above 8:1. Guessing does not work, which is the entire reason for measuring.

The thresholds are 4.5:1 for normal text and 3:1 for large text at AA, rising to 7:1 and 4.5:1 at AAA. Large means 18pt, or 14pt bold. Non-text elements that convey meaning — icons, input borders, focus rings — need 3:1, which is the requirement most often missed. The checker reports all five thresholds for every pair, so nothing is hidden by the target you picked. What it cannot do is look at your page: it measures the two colours you type, so text over a gradient, an image or a translucent panel has to be reduced to a flat pair yourself before the number means anything.

How to use it

  1. Pick two colours. Use the foreground and background swatches, or paste a list of pairs — one per line, written as "#111827 on #ffffff" or separated by a comma.
  2. Choose the target. AA or AAA, normal or large text. The report still shows every threshold, so the target only decides what counts as a pass.
  3. Read the ratio. You get the number, a rendered preview of the text on that background, and pass or fail badges for AA normal, AA large, AAA normal, AAA large and the 3:1 bar for interface components.
  4. Take the suggested colour. When a pair fails, the checker walks the foreground lighter or darker at the same hue until it clears the target, and reports the first shade that does.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Checking a design system

Verify every text-on-surface pair before it is used in a hundred components.

Fixing an audit finding

Contrast is the single most common issue in automated accessibility reports.

Choosing a brand colour

Find out early whether a brand colour can carry text, or only sit behind it.

Reviewing muted text

Secondary and placeholder text is where contrast quietly fails most often.

Questions

What ratio do I actually need?
4.5:1 for normal text at AA, 3:1 for large text (18pt, or 14pt bold). AAA raises those to 7:1 and 4.5:1. Meaningful non-text elements such as icons and focus indicators need 3:1 — the accessibility contrast threshold design reviews miss most often.
Does this cover the whole of WCAG?
No. Contrast is one success criterion among dozens. Passing it does not make an interface accessible — it means one specific, measurable thing is right.
Why does my colour fail when it looks fine?
Because luminance is weighted by channel: green contributes most, blue least. Yellows and light greens look brighter than they measure; blues and purples measure better than they look.
What about transparency?
A translucent foreground such as rgba(17,24,39,0.6) is composited over the background you gave before the ratio is measured, and the report shows the solid colour it composites to. That only works when the backdrop is the flat colour you entered — over a gradient, a photo or a semi-transparent background of its own, the number will not match what a browser paints.
Why does the suggested colour keep the same hue?
It only moves lightness, so the fix stays recognisably your colour. That also means it can fail: if no lightness of that hue clears the target on that background, the tool says so rather than inventing a different hue.
Is APCA a replacement?
APCA is a newer perceptual model likely to appear in WCAG 3, and it models thin light text more realistically. It is not yet the standard anyone is audited against, so the WCAG ratio is what this reports.

Related tools

  • HEX to RGB — Convert a hex colour to RGB values.
  • RGB to HEX — Convert RGB values to a hex colour.
  • HEX to HSL — Convert hex to hue, saturation and lightness.
  • HSL to HEX — Convert HSL values back to a hex colour.
  • CMYK Converter — Convert between RGB and CMYK for print work.
  • Color Picker — Pick a colour and copy it in any notation.