The contrast matrix
Of the 64,262 ordered pairs you can make from the 254 colors in this library, 8,930 clear WCAG AA for normal text. That is 13.9 percent. Pick a background below to see exactly which ones, at which ratio.
What this tells you
The number that surprises most people is how low 13.9 percent is. Two colors picked at random from a curated, tasteful palette clear AA for body text less than half the time. Contrast is a function of luminance, and most palettes cluster their colors in the middle of the luminance range, where nothing contrasts with anything.
That is also why a palette needs a light end and a dark end before it needs more hues. If every color in a set sits between 40 and 60 percent lightness, no amount of hue variety will make the set accessible.
The five hardest backgrounds in this library
These have the fewest library colors that pass AA as text on them.
| Background | Colors passing AA | Best available | On white |
|---|---|---|---|
| Burnt Orange | 1 of 253 | Black, 4.87:1 | 4.31:1 |
| Forest Green | 1 of 253 | Black, 4.78:1 | 4.39:1 |
| Cerise | 1 of 253 | Black, 4.73:1 | 4.44:1 |
| Light Brown | 1 of 253 | Black, 4.84:1 | 4.34:1 |
| Red | 2 of 253 | Black, 5.25:1 | 4.00:1 |
The five most forgiving backgrounds
| Background | Colors passing AA | Best available | On ink black |
|---|---|---|---|
| Black | 176 of 253 | White, 21.00:1 | 1.10:1 |
| Ink Black | 170 of 253 | White, 19.14:1 | 1.00:1 |
| Eerie Black | 152 of 253 | White, 17.22:1 | 1.11:1 |
| Navy | 143 of 253 | White, 16.01:1 | 1.20:1 |
| Dark Blue | 136 of 253 | White, 15.30:1 | 1.25:1 |
How it is calculated, and its limits
Every ratio uses the WCAG relative luminance formula, unchanged between WCAG 2.1 and 2.2. It is a luminance calculation, not a perceptual model: it says nothing about whether two colors of similar luminance are distinguishable, and nothing about how a combination reads for someone with a color vision deficiency. A pair can clear 7:1 and still be a poor choice. See the methodology for the full formula and what it does not model.
No pair gets its own page. Generating 64,000 near-identical URLs is the fastest way to teach a search engine that a site is not worth crawling, and the data is more useful filterable than paginated.
Related
Last updated by FusionStudios. Every value on this page is computed by the same functions the tools use. How this is calculated.