Accessible Color Pair Matrix

A palette can look balanced and still fail the people who have to read it. Pale grey text on white, a sky-blue button with white label, amber headings on a cream page: each looks fine to the designer on a good monitor and is hard to read for many users. Checking pairs one at a time with a contrast checker is slow when a palette has eight or ten colours. This page tests every combination at once and shows which ones are safe to use for text.

What is measured

WCAG 2 defines contrast as a ratio between the relative luminance of two colours. Luminance is a weighted sum of the linearised red, green and blue values, with green counting most because the eye is most sensitive to it. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour, and runs from 1:1 for identical colours to 21:1 for black on white. Normal text needs at least 4.5:1 for level AA and 7:1 for AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. User interface parts and graphics, such as borders of inputs and chart lines, need 3:1.

A worked example

Press Sample for eight colours: White, Ink #111827, Slate #475569, Brand blue #1d4ed8, Sky #38bdf8, Amber #f59e0b, Mint #d1fae5 and Rose #e11d48. That gives 56 ordered pairs. Ink on White scores 17.74:1 (AAA), Slate on White 7.58:1 (AAA), Brand blue on White 6.7:1 (AA) and Rose on White 4.7:1 (AA, just above the line for normal text). Sky on White scores only 2.14:1 and Amber on White 2.15:1, so both fail. The same colours work in other places: Ink on Amber is 8.26:1, Sky on Ink 8.28:1 and Slate on Mint 6.68:1. At the normal-text level 18 pairs pass, at large text and UI level 30 pass, and 10 reach AAA for normal text.

Reading the grid

Rows are the text colour and columns the background. Each cell shows a sample letter pair, the ratio, a tick or cross for the level you selected and the best level reached: AAA, AA or Fail. The diagonal is empty, because a colour on itself has no contrast. Because the ratio is symmetric, White on Ink and Ink on White show the same figure, which is why the pass counts are always even; half the cells are the same checks seen from the other side. Switch the highlighting between normal text, large text and UI parts to see how much more freedom the lower thresholds allow.

Using the result

Treat the matrix as a menu of safe combinations. Mark in your design system which pairs are allowed for body text, which only for headings, and which only for decorative or large elements. If a brand colour fails on white but works on Ink, say so in the guidelines. Download the CSV to put the table in documentation or to check changes in a spreadsheet. When a pair is close, nudge lightness slightly with a colour tool and check again instead of dropping the colour.

Edge cases

Contrast is calculated from opaque colours, so text over a photo, gradient or translucent layer must be tested at the worst point. Hover, focus and disabled states are separate pairs. Disabled controls are exempt from the success criterion, but a very faint label is still hard to see. Thin or condensed fonts can be unreadable at a passing ratio, and WCAG 2 ignores font weight apart from the large-text rule.

Limits

Only WCAG 2.x ratios are computed, not APCA or the proposed WCAG 3 method. The matrix says nothing about colour blindness; run the palette through the colour blindness simulator too. It cannot judge whether colour is the only way information is conveyed. Everything runs in your browser.

Related tools

• Contrast Checker tests one pair with a live preview.
• Color Blindness Simulator shows how the palette looks under three types of deficiency.
• Tailwind Color Scale Generator creates shades with contrast numbers.
• Brand Color Palette PDF documents the approved colours in a sheet.