Brand Palette Contrast Matrix
Audit entire color palettes simultaneously. Generate an N × N pairwise contrast matrix showing WCAG 2.2 Level AA (4.5:1) and AAA (7:1) text compliance across every background combination.
Active Palette Swatches (Up to 6 Colors)
Pairwise Contrast Ratio Matrix (Text on Background)
Why Do Design Systems Need a Contrast Matrix?
Auditing colors one pair at a time is tedious and leads to accidental WCAG non-compliance when junior developers combine secondary palette tones. A Palette Contrast Matrix tests all permutations at once, showing exactly which background/text pairings pass Level AA (4.5:1 for normal body copy, 3:1 for large 18pt+ headings) and Level AAA (7:1 for enhanced visual accessibility).
WCAG 2.2 Contrast Standards Summary
Pass AAA (≥ 7.0:1)
Optimal readability for users with low vision or high glare. Safe for all text sizes.
Pass AA (≥ 4.5:1)
Minimum legal standard under the Americans with Disabilities Act (ADA) and Section 508.
Fail (< 3.0:1)
Illegible text. Do not use for essential UI text, form labels, or body content.
Frequently Asked Questions
What is relative luminance?
Relative luminance is the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white, weighted by human spectral sensitivity.
Does button text require a 4.5:1 contrast ratio?
Yes, normal body and button text under 18pt (or bold text under 14pt) requires at least a 4.5:1 contrast ratio to be WCAG Level AA compliant.