Palette Accessibility Auditor
| TEXT ↓ · BG → | #2C241B | #F3E9D6 | #B23A2E | #26385C | #B98A3C | #2F7D4E |
|---|---|---|---|---|---|---|
#2C241B | Aa 12.68 AAA | Aa 2.57 FAIL | Aa 1.31 FAIL | Aa 4.92 AA | Aa 3.03 AA-L | |
#F3E9D6 | Aa 12.68 AAA | Aa 4.93 AA | Aa 9.67 AAA | Aa 2.58 FAIL | Aa 4.19 AA-L | |
#B23A2E | Aa 2.57 FAIL | Aa 4.93 AA | Aa 1.96 FAIL | Aa 1.91 FAIL | Aa 1.18 FAIL | |
#26385C | Aa 1.31 FAIL | Aa 9.67 AAA | Aa 1.96 FAIL | Aa 3.75 AA-L | Aa 2.31 FAIL | |
#B98A3C | Aa 4.92 AA | Aa 2.58 FAIL | Aa 1.91 FAIL | Aa 3.75 AA-L | Aa 1.62 FAIL | |
#2F7D4E | Aa 3.03 AA-L | Aa 4.19 AA-L | Aa 1.18 FAIL | Aa 2.31 FAIL | Aa 1.62 FAIL |
Paste hex values separated by spaces, commas, or new lines (up to 12). Each cell shows that row's color as text on that column's color: AAA ≥ 7:1, AA ≥ 4.5:1, AA-L (large text) ≥ 3:1.
How it works
仕組みA palette that looks great as swatches can still fail the moment one of its colors becomes text on another. This auditor takes your whole palette at once and builds the full contrast matrix: every color as text on every other color, each pair graded against WCAG. It's the fastest way to learn which combinations in your design system are safe for body text, which only work for large headings, and which should never carry words at all.
Each row is a text color and each column a background. The badge in every cell shows the exact ratio and the best level it clears: AAA (7:1+), AA (4.5:1+), AA-L (3:1+, large text only), or FAIL.
No. Most palettes intentionally include neighbours that never meet as text and background. Audit the pairs your UI actually produces (body text on surfaces, buttons and their labels) and let decorative combinations fail in peace.
Twelve colors already produce 132 ordered pairs. Beyond that the matrix stops being readable, and a design system with more text-capable colors than that usually has a different problem.