ZeonTools
What is a Palette Contrast Heatmap?
When you are building a UI design system, testing a single text-on-background pair is not enough. Modern digital products use complex, layered systems where disabled buttons, hover states, input borders, error badges, and modal overlays all interact dynamically with multiple background shades simultaneously.
A Contrast Heatmap Matrix automatically cross-references every color in your design system against every other color, calculating the relative luminance and WCAG contrast ratios for all N×N permutations at once. You can instantly see which pairs are safe, which are illegal, and which fall into the "large text only" grey zone.
A 5-color palette has 25 possible foreground-background permutations. An 8-color palette has 64. Testing these one-by-one in a standard contrast checker takes 45+ minutes. Our heatmap generates all combinations in under a second, highlights passes in green and failures in red, and gives you a single screenshot for your design system documentation.
Why Design Systems Need an Accessibility Matrix
Scalable design systems use tokenized color scales (e.g., Slate-50 through Slate-900). Without a matrix, you risk silently introducing accessibility failures when applying tokens to new UI components.
- Dark Mode Inversions: A combination that passes in Light Mode (e.g., Slate-800 on Slate-100) does not mathematically guarantee it will also pass when inverted in Dark Mode (e.g., Slate-100 on Slate-800) due to how the legacy WCAG algorithm handles perceptual lightness asymmetry.
- Non-Text Contrast (WCAG 1.4.11): Active UI elements — text input borders, graphical focus indicators, toggle switches — require a minimum 3.0:1 ratio against adjacent backgrounds. A matrix helps you pick safe border colors instantly.
- Disabled State Design: The most common accessibility failure in modern web design is low-contrast disabled buttons. The matrix helps you find a gray token that reads as "inactive" while remaining legally distinguishable.
WCAG 2.1 vs APCA (WCAG 3.0): The Math Explained
The industry is currently in transition between the legacy WCAG 2.1 standard and the upcoming APCA algorithm slated for WCAG 3.0. Our tool provides live calculations for both standards.
WCAG 2.1 Formula (Relative Luminance)
The current legal standard calculates contrast using (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are relative luminance values. The formula is symmetric — swapping text and background does not change the ratio.
| Standard | Text Size | Min. Ratio |
|---|---|---|
| WCAG AA | Normal (<18pt / <24px) | 4.5:1 |
| WCAG AA | Large (≥18pt or ≥14pt bold) | 3.0:1 |
| WCAG AAA | Normal (Maximum strictness) | 7.0:1 |
APCA (Polarity-Sensitive Perceptual Contrast)
The legacy WCAG 2.1 formula produces false failures for light text on dark, colorful backgrounds because it scales luminance linearly. APCA fixes this by modelling human visual perception logarithmically.
Crucially, APCA is polarity-sensitive — white text on a blue background generates a mathematically different Lc (Lightness Contrast) score than blue text on a white background. When you select APCA in our tool, the matrix becomes asymmetrical to reflect this perceptual reality.
Designing for Color Vision Deficiency (CVD)
Approximately 8% of men and 0.5% of women have some form of Color Vision Deficiency. The most common type is Deuteranopia (red-green color blindness).
Our tool includes a unique CVD matrix simulator. When you activate Deuteranopia mode, every color in your palette is run through a biological spectral confusion matrix before the contrast ratios are recalculated. The heatmap also re-renders all cells using the simulated color values, so you can see exactly what your green success badge and red error text actually look like to a colorblind user — and whether those two specific hues still have sufficient contrast between them.
ADA Legal Risk & Accessibility Compliance
In the US, courts have repeatedly interpreted the Americans with Disabilities Act (ADA) to cover digital storefronts and web platforms. In the EU, the European Accessibility Act (EAA) mandated WCAG 2.1 AA compliance for most digital products by June 2025.
Failing WCAG 2.1 AA color contrast requirements is one of the most common findings in formal accessibility audits. Generating and documenting a passing heatmap for your complete design palette is the first line of defense in demonstrating good-faith accessibility effort.
For a full, pixel-by-pixel contrast check on an existing mockup or screenshot, also try our WCAG Color Contrast Checker with its canvas-based eyedropper.