Colour Contrast Matrix

Paste a colour palette — one colour per line, with an optional label (Primary: #0066cc or Label — dodgerblue) and optional # comment lines as section headers — and see the N×N contrast-ratio matrix with per-cell WCAG 2.x verdicts. The strongest and weakest pair are highlighted, the top AA- and AAA-passing pairs are ranked, and every swatch is click-to-copy. Pure client-side, no upload, no tracking.

—
Input format
  • One entry per line.
  • Optional Label: or Label — prefix (the part before the separator becomes the row label).
  • Colour values: #RGB, #RRGGBB, rgb(r, g, b), hsl(h, s%, l%), or any of the 148 CSS named colours (e.g. rebeccapurple).
  • Lines starting with # that are NOT a valid hex colour are treated as section headers / comments.
  • Up to 64 colours per palette. The matrix renders in your browser; nothing is uploaded.
Colours 0
Pairs 0
AA normal 0 —
AAA normal 0 —
UI (1.4.11) 0 —
Matrix

Paste a palette above to see the contrast matrix.

Strongest & weakest pair
Strongest
— :1

—

Weakest
— :1

—

Ranked pairs
How the matrix works
  • Contrast ratio follows the WCAG 2.x algorithm: each sRGB channel is linearised, the relative luminance is the weighted sum 0.2126·R + 0.7152·G + 0.0722·B, and the ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter colour on top. The result is always in [1, 21].
  • Conformance verdicts per cell: AA normal text (4.5), AAA normal text (7), AA large text (3), non-text UI components (3, per 1.4.11). The cell is green if AA passes, blue if AAA passes, and red otherwise. The cell with the highest ratio is outlined when the Emphasise the strongest pair toggle is on.
  • Strongest pair is the highest-ratio off-diagonal pair (or the highest-ratio AA / AAA pair if you switch the criterion). Weakest pair is always the lowest off-diagonal pair — the bar that should fail review first.
  • Ranked pairs lists every distinct pair in order, with the criterion filter. Use it to find a body-text foreground for a given background, or to see which combinations silently fail.
  • Click any swatch in the matrix or pair cards to copy the hex code. Click any cell number to copy the foreground / background pair.
  • Nothing leaves your browser. The whole tool runs in this tab; your palette never touches the network.