Skip to content

Check colour contrast

Check a foreground and background colour against the WCAG 2.x contrast rules.

contrastwcagaccessibility

Upload

Foreground The text colour. HEX (with or without #), rgb(), rgba(), hsl(), hsla() or the bare comma shape, alpha optional.
Background The surface colour, in the same accepted forms.
Questions people ask
Which thresholds does the tool report?
All four, every run: AA for normal text (4.5), AA for large text (3.0), AAA for normal text (7.0) and AAA for large text (4.5). Large text means 18pt or 14pt bold. The tool cannot measure the font size your page actually renders, so it states every threshold and lets you pick the one that applies.
How is a translucent colour measured?
Exactly as you choose with the compositing option. Keep composites the foreground over the background, and when the background itself has alpha it is flattened onto white first. White and black flatten any alpha onto that solid before the ratio. The effective flattened colours of the pair are reported in the file.
Is the ratio exact?
The maths is the WCAG 2.x relative-luminance formula, computed on the two effective colours and reported to 4 decimals. Mixed channels from percents and flattened composites are rounded half up to whole channels first, which can move the ratio in its last decimal.
What about identical colours?
A pair like #222222 against #222222 has a ratio of exactly 1 (which fails every threshold), and the report says the colours are identical rather than pretending a subtle same-colour pair is measurable.
Do my colours need a specific format?
No. HEX with or without the # (3, 4, 6 or 8 digits), rgb() and rgba() with whole channels or percents, hsl() and hsla(), and the bare comma or space shapes all parse. Out-of-range components refuse with a named error instead of being clamped.
Is anything uploaded?
No. Two typed values and one choice, nothing more: there is no upload surface and the report is a small JSON file that lives for about 10 minutes.