WCAG 2.1 AA / AAA · Multi-Color Matrix · Accessible UI
Contrast Grid Generator
Evaluate an entire palette of brand colors against each other in a multi-color accessibility matrix. Catch illegible combinations before shipping to production.
Presets:
Palette Tokens (5 Colors)
#ffffff
#0f172a
#2563eb
#64748b
#f1f5f9
#ec4899
Total Combinations
20
WCAG AA Pass (≥ 4.5:1)
10
(50%)WCAG AAA Pass (≥ 7:1)
4
(20%)Filter Cells
| BG ↓ / FG → | White #ffffff | Dark Slate #0f172a | Primary Blue #2563eb | Muted Gray #64748b | Light Surface #f1f5f9 |
|---|---|---|---|---|---|
White #ffffff | 1.00:1 | Aa Sample 17.85:1AAA | Aa Sample 5.17:1AA | Aa Sample 4.76:1AA | Aa Sample 1.1:1Fail |
Dark Slate #0f172a | Aa Sample 17.85:1AAA | 1.00:1 | Aa Sample 3.45:1AA Large | Aa Sample 3.75:1AA Large | Aa Sample 16.3:1AAA |
Primary Blue #2563eb | Aa Sample 5.17:1AA | Aa Sample 3.45:1AA Large | 1.00:1 | Aa Sample 1.09:1Fail | Aa Sample 4.72:1AA |
Muted Gray #64748b | Aa Sample 4.76:1AA | Aa Sample 3.75:1AA Large | Aa Sample 1.09:1Fail | 1.00:1 | Aa Sample 4.34:1AA Large |
Light Surface #f1f5f9 | Aa Sample 1.1:1Fail | Aa Sample 16.3:1AAA | Aa Sample 4.72:1AA | Aa Sample 4.34:1AA Large | 1.00:1 |
Accessibility Compliance (WCAG 2.1 Level AA/AAA) Guide
1WCAG 2.1 Numerical Thresholds Decoded
- Level AA Normal Text (≥ 4.5:1): The global baseline for standard body copy, labels, and paragraph text under 18pt (or bold text under 14pt). Required by ADA and European accessibility mandates.
- Level AA Large Text (≥ 3.0:1): Applies to headings (18pt+ regular or 14pt+ bold) as well as critical UI components, button borders, and input focus rings.
- Level AAA Enhanced Contrast (≥ 7.0:1): The strictest standard for maximum readability across severe visual impairments, low-luminance displays, or direct sunlight mobile viewing.
2Building Accessible Design Systems with Matrix Grids
In a modern design system, you cannot test colors in isolation. You must systematically audit how tokens interact when layered as background surfaces and foreground text.
• Never use brand accent colors directly for continuous body copy
• Reserve high-contrast pairs (10:1+) for primary reading flows
• Use matrix tables in your design tokens documentation for QA audits
By running your palette through an N×N matrix, developers and designers can immediately identify which background-to-text token pairings are safe to use in UI components.