Check whether two colours can be read together

Contrast is the accessibility requirement that gets missed most often and is the easiest to check. WCAG defines it as arithmetic on the two colours: convert each to relative luminance, add 0.05 to both, divide the larger by the smaller. There is nothing to estimate, which is why every figure here is exact and the thresholds are compared exactly rather than after rounding. A pair at 4.49 to 1 is reported as failing AA for body text, because that is what it does, and a checker that rounded it up would be worse than no checker at all: the person using one is usually trying to discharge an obligation, not looking for reassurance.

Five verdicts are shown for each pair. AA at 4.5 to 1 is the one that applies to ordinary body text and is the one most designs miss. AA for large text drops to 3 to 1, where large means 18.66 pixels and bold or 24 pixels and up. AAA raises both to 7 and 4.5. The fifth, 3 to 1, covers interface components and meaningful graphics: the border of an input, the line of a chart, the icon that is the only label on a button.

When a pair fails, the useful answer is not that it failed. It is the nearest colour to the one you chose that does not. The suggestion moves lightness in OKLCH and leaves hue and chroma where they are, so what comes back still belongs to the palette rather than being some other colour that happens to pass. Where a darker version of a saturated colour would fall outside what a screen can show, chroma comes down by as little as the gamut requires rather than the channels being clipped, which would swing the hue while claiming to have touched only lightness.

Sometimes there is no answer, and the tool says so instead of returning a near miss. No lightness of a saturated yellow reaches 7 to 1 against white. That is a fact about the two colours and the honest response is to change one of them.

The same panel converts between the formats a stylesheet uses: hex, rgb(), hsl() and oklch(), with alpha carried through all four. Hex and oklch() round-trip exactly. hsl() is printed in whole degrees and whole percent, because that is what people paste into CSS, and whole numbers cannot name every eight-bit colour; measured across the colour cube the cost is at most three parts in 255, worst on saturated purples. It is stated here rather than left to be discovered, and it is why the hex value is the one to copy when the exact colour matters.

Colours are typed rather than uploaded, and nothing about this needs a server. The point of running it here is the same as everywhere else on this site: the palette of a product that has not shipped yet is not something to paste into somebody else’s form.