Color Palette Contrast Matrix
Check every text and background combination of a palette at once, with contrast ratios and WCAG AA and AAA results. Runs entirely in your browser. Nothing is sent to any server.
One color per line, in any format. Up to 10 colors; duplicates are merged.
AAA: 7:1 or more. AA: 4.5:1 or more. AA large: 3:1 or more, enough only for large text (24px, or 18.7px bold) and UI components.
What is a contrast matrix?
A contrast matrix checks every color in a palette against every other one, as text and as background, so you can see at a glance which combinations are readable. Each cell shows a sample in that text color on that background, its WCAG 2.x contrast ratio and the level it reaches: AAA from 7:1, AA from 4.5:1, and AA for large text and interface components from 3:1. Instead of checking pairs one by one, you paste the whole palette and get the full picture, which is how design systems document which colors may be combined.
Examples
Checking every pair of a palette in code:
// every ordered pair, skipping a color on itself
for (const text of palette)
for (const bg of palette)
if (text !== bg) console.log(text, bg, contrast(text, bg));from itertools import permutations
for text, bg in permutations(palette, 2):
print(text, bg, round(contrast(text, bg), 2))/* a passing pair from the matrix, as tokens */
:root {
--text-on-surface: #111827;
--surface: #e5e7eb;
}Use Cases
Documenting a design system
Publish which text and background colors may be combined, so nobody has to check contrast again for each new screen.
Auditing a brand palette
Paste the brand colors and find out right away which ones can carry body text and which are for decoration only.
Choosing button and badge colors
Compare candidate fills against white and dark text in one view to pick the ones that work with both.
Charts and data labels
Check which label color stays readable on each series color before placing values inside bars or slices.