How to Use the 5-Color Palette WCAG Contrast Matrix Grid
-
1
Input 5 brand colors (e.g. Background, Surface, Primary, Text Dark, Accent).
-
2
The tool computes the 5x5 contrast matrix, evaluating all 20 possible foreground/background combinations.
-
3
Each cell displays the exact contrast ratio (e.g. 12.4:1) with clear WCAG AA and AAA pass/fail badges for Normal and Large text.
-
4
Export the accessibility audit report.
Practical Example & Use Case
Common Real-World Scenario
Auditing a design system palette to ensure that Primary Blue on Light Gray passes the minimum 4.5:1 ratio for normal body copy.
Technical Notes & Limitations
Browser Engine Architecture
Uses standard W3C relative luminance contrast ratio formula `(L1 + 0.05) / (L2 + 0.05)`.
Frequently Asked Questions
What is the WCAG 2.1 AA minimum contrast requirement?
4.5:1 for normal body text (< 18pt), and 3.0:1 for large text (≥ 18pt or 14pt bold) and user interface components.