Accessibility · Free Tool

Contrast Grid

Paste a palette and see every colour pair scored for WCAG contrast at once — a matrix of every text-on-background combination with AA/AAA verdicts. All computed in your browser.

Your colours (one per line — hex or CSS name)

normal text large text

How it works

Every colour is paired with every other as text on background, and each pair’s WCAG contrast ratio is computed from relative luminance — all in your browser. A ratio of 4.5:1 is the AA threshold for normal text (3:1 for large text ≥18.66px bold or 24px), and 7:1 is AAA. Colours are parsed with a canvas context, so any CSS colour works: #hex, rgb(), or names like rebeccapurple.