Contrast Grid

What this checks

Every cell shows one colour used as text on another used as a background, with its WCAG 2.1 contrast ratio and the level it reaches. A palette of eight colours has sixty-four combinations, and checking them one pair at a time is how the failing ones get missed.

How to read the result

WCAG 2.1 asks for a ratio of at least 4.5:1 for body text, and 3:1 for large text (roughly 24px, or 19px bold) and for the boundaries of interface components such as input borders. AAA raises the body-text bar to 7:1.

A pair that fails is not automatically unusable — it is unusable for that role. A colour too weak for body text is often perfectly good as a background fill, a border, or a large heading.

Why APCA is shown but not used as a verdict

APCA is a newer contrast model, developed for WCAG 3, that accounts for the fact that dark text on a light background and light text on a dark background do not behave symmetrically. Its Lc value is signed: positive means dark text on light, negative means the reverse, and the magnitude is what matters.

It is shown here because it is genuinely more predictive of readability. It is not shown as a pass or fail because it is still a draft, and WCAG 2.1 is the standard that accessibility requirements actually reference. Treat APCA as a second opinion.

Colour-blindness simulation

The simulation approximates how a palette appears to someone with protanopia, deuteranopia, or tritanopia. It is a useful check for one specific failure: a design that distinguishes two states by hue alone. If two colours become indistinguishable under simulation, anything that relies on telling them apart needs a second signal — a label, an icon, or a shape.

Two caveats worth stating. The protanopia and deuteranopia models are exact projections onto the colours those forms of dichromacy can distinguish; the tritanopia model is a rougher approximation, because tritanopia is not well described by a single transformation. And all three simulatedichromacy — the complete absence of one cone type — which is rarer than anomalous trichromacy, where a cone is shifted rather than missing. Read the output as a stress test, not a photograph of what someone sees.

Frequently asked questions

Does a passing ratio mean the text is readable?

No. Contrast is necessary but not sufficient. A 12:1 ratio at 11px in a light weight is still hard to read. Size, weight, line length and letter-spacing all matter, and none of them appear in a contrast ratio.

Which background should I check against?

The worst one the text can actually land on. If a component appears on both your page background and a card surface, check both — the card is usually the one that fails.

What about text over images or gradients?

Check the lightest and darkest points the text can overlap. If they do not both pass, the fix is normally a scrim behind the text rather than a different colour.