Contrast Grid

Rows are text colors, columns are backgrounds. Each cell renders the actual pair with its ratio; ✓ marks pairs at or above the chosen bar. Audit a whole design-system palette at once.

A 12-colour grid draws 132 cells and contains 12 numbers

The WCAG formula puts the lighter colour on top by definition, so it cannot tell which of the two you meant as text: the ratio of A on B and B on A is the same number. Checked on 20,000 random pairs with no exceptions. The grid is therefore symmetric about its diagonal, and the summary line above counts cells rather than pairs — so it reports twice as many passes as there are decisions to make.

It compresses further than that. The ratio is (lighter + 0.05) / (darker + 0.05) and nothing else — hue and saturation never appear. Two completely different-looking colours with the same relative luminance produce identical rows, so an n by n grid has n degrees of freedom rather than n squared. Recomputing 5,000 random pairs from luminance alone reproduces the ratio exactly every time.

Sort by luminance and every row is a bowtie, not a staircase

Fix a text colour at luminance L and a bar of r. A background passes if its luminance is at least r(L + 0.05) − 0.05, or at most (L + 0.05)/r − 0.05. Two half-lines with one gap between them — which those formulae predict for all 6,000 test marks with zero mismatches. So the passes are not one block. A row can pass at both ends of the luminance ordering at once, which is what I assumed it could not and is false on this page's own default palette at 3:1. It is the failures that form one unbroken band in the middle — verified on 15,000 random palette-and-bar combinations without exception.

Scored against each bar, that palette gives 7 of 15 pairs at 3:1, 5 of 15 pairs at 4.5:1 and 2 of 15 pairs at 7:1.

The three pass bars are in three different regimes, because 3 × 7 = 21

Push the thresholds to their limits. A colour can pass against something lighter only if the luminance that would take is still on the scale, so only if L ≤ 1.05/r − 0.05. It can pass against something darker only if L ≥ 0.05r − 0.05. Those two limits move in opposite directions as the bar rises, and the three options in the dropdown land in three genuinely different places.

At 3:1 there is a comfortable band of colours that work against both white and black. At 4.5:1 that band is 0.83% of the luminance range. At 7:1 it has not merely closed — it has inverted into a band where a colour works against neither extreme, and it is exactly the same interval, 0.1 to 0.3, that was comfortable at 3:1.

That mirroring is not a coincidence. 21 is the largest ratio the formula can produce — white against black — and the two limits coincide for any pair of bars whose product is 21, checked on six such pairs the page does not even offer. Three and seven are the two ends of this dropdown. The crossover, where the band closes to nothing, is √21 ≈ 4.583. And the AA bar of 4.5 sits just below it: 4.5 squared is 20.25, short of 21 by 0.75. That margin is the entire reason a colour passing against both white and black exists at all.