Measures the contrast ratio between a foreground and background colour against the WCAG thresholds: 4.5:1 for body text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at AAA, with 3:1 for interface components and meaningful graphics.
The ratio comes from relative luminance, which is not the lightness slider in a colour picker — that is why pairs that look fine on a good monitor fail for a reader on a phone in daylight. Translucent text must be composited against its actual background before measuring, or the number describes a colour nobody sees.
Frequently asked questions
What contrast ratio do I actually need?
WCAG 2.2 sets three bars. Body text needs 4.5:1 for AA and 7:1 for AAA. Large text — 24px regular or 18.66px bold and above — needs 3:1 for AA and 4.5:1 for AAA. Interface components and meaningful graphics, which covers input borders, focus rings, icons and chart series, need 3:1 under success criterion 1.4.11. AA is what almost every legal accessibility requirement references, so 4.5:1 is the number to design to unless you have a reason to go further.
Why does this tool give a different answer than others for semi-transparent text?
Because it composites the colour first. WCAG defines contrast between two opaque colours, so rgba(0 0 0 / 0.55) has no ratio of its own — what the eye sees, and what the standard grades, is that colour blended over whatever is behind it. Many checkers measure the unblended colour instead, which always reports a higher ratio than the truth and passes text that visibly fails. If your foreground has an alpha channel, the composited hex is shown alongside the result.
Can I check a whole palette at once?
Yes, and that is the main reason to use this rather than a single-pair checker. Put one colour per line in each pane and they are checked index for index. If one side has a single colour it is reused for every colour on the other — so one background and eight text colours checks all eight against that background, which is the shape a real palette audit takes.
How is the suggested colour chosen?
By moving the text colour toward white or black — whichever direction increases contrast against that specific background — and binary-searching for the smallest change that clears your target. Smallest matters: the point is to keep the colour recognisable, and any tool can suggest pure black. When nothing passes, it says so, which happens for real on mid-grey backgrounds where no colour reaches 7:1 in either direction.
Does passing WCAG contrast mean my page is accessible?
No. Contrast is one success criterion among dozens, and it says nothing about keyboard access, focus order, form labels, heading structure or whether the content makes sense read aloud. It is worth checking because it is objective, automatable and the most commonly failed criterion on the web — but a green result is a floor, not a certificate.
Why not APCA instead?
APCA is the perceptual contrast algorithm being developed for WCAG 3, and it does model real readability better than the WCAG 2.x luminance ratio, particularly for light text on dark backgrounds. It is not yet a published standard, and conformance obligations still cite WCAG 2.x ratios. This tool reports the number you will be measured against today.