Contrast checker.
The contrast checker calculates the WCAG ratio between two colours and tells you which of the four thresholds it passes.
The calculation follows the relative luminance formula defined by the W3C: each colour channel is linearised first, then weighted by coefficients that reflect the human eye’s sensitivity to green. The result is a value between 1:1 and 21:1 — the extremes being an identical colour and black against white.
Why there are four different thresholds
WCAG does not give a single number, because legibility does not depend on colour alone. For text at normal size the AA threshold is 4.5:1; large text — 18.66 pixels bold or 24 pixels regular — reads at less contrast, so 3:1 applies. Level AAA moves the same pair to 7:1 and 4.5:1.
The fourth threshold looks at the interface rather than the text. The border of a form field, an icon, a graphical element is not text, but if it cannot be seen it cannot be used; 1.4.11 Non-text Contrast asks for 3:1 in these cases. This is the most frequently skipped criterion, because most automated auditing tools scan text only.
Measure what you measure, not what you see
The verdict “it looks dark enough on screen” is unreliable: the perception of brightness shifts with the display, the ambient light and the eye. In this site’s own build the measurement once returned exactly that — a form field border came out at 1.29:1, far below the threshold and too subtle to catch by eye. After the fix it read 3.13:1 and was tied to a test in the suite.
The calculation in this tool is the same function used by this site’s verification suite. A calculation that returned different results in two places would make one of them a liar; that is why the formula comes from a single definition. A step-by-step explanation of the calculation and what relative luminance is are written separately.
What it does not do
The tool cannot scan a page; it measures only the two colours you give it. Scanning a page requires the colours computed after the real render — transparency, overlapping layers and text over an image all change the result. For a full audit use a browser extension or automated auditing tools; their limits are written separately too.
How to use
- Enter the foreground colour as a six-digit hexadecimal value
- Enter the background colour
- The result updates instantly — each of the four thresholds is marked separately
The tool runs entirely in your browser — no data is sent, no cookies are written.