Palette Contrast Heatmapper

Enter your brand hex codes and instantly generate a full WCAG 2.1 & APCA cross-reference accessibility matrix for your entire design system.

Accessibility Matrix

Define your colors in the sidebar and click Render Heatmap.

1What 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.

2Why 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.
  • 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.
  • 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.

3WCAG 2.1 vs APCA (WCAG 3.0): The Math

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

4Designing 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.

6How to Build a Tokenized Accessible Color System

Modern design systems don't use hardcoded hex values (like #FF0000). Instead, they use semantic Design Tokens. A token describes the intent of a color rather than its visual hue.

  • Surface Tokens: surface-100 (App background), surface-200 (Card background).
  • Text Tokens: text-on-surface (Primary text), text-muted (Secondary text).

By inputting semantic tokens into the Heatmapper, you can mathematically prove that text-on-surface passes WCAG AA on all surface levels simultaneously.

7The Light vs. Dark Mode Inversion Problem

A common pitfall in system design is assuming that if a foreground/background pair has sufficient contrast in light mode, their inverted counterparts will pass in dark mode. Because the WCAG 2.1 math scales luminance linearly, it severely penalizes light text on dark backgrounds compared to dark text on light backgrounds.

This means your dark mode requires completely separate token mapping scales. A matrix heatmapper visualizes exactly where your inverted scales fall short, forcing you to mathematically adjust the lightness of your dark mode surfaces.

8Mastering Non-Text Contrast (WCAG 1.4.11)

Contrast isn't just for text. WCAG 1.4.11 dictates that UI components and graphical objects must have a contrast ratio of at least 3.0:1 against adjacent colors. This applies to form field borders, tab indicators, custom radio buttons, and chart data points.

Our heatmap's 'UI/Large' 3.0:1 indicator explicitly tells you which token pairings are legally safe to use for interactive borders and graphic elements, protecting you from subtle audit failures.

9The Relative Luminance Formula

The core of accessibility mathematics is Relative Luminance. It calculates the brightness of a color as perceived by the human eye, ranging from 0 (pure black) to 1 (pure white). It applies a heavier weighting to green light (71.52%) than red (21.26%) or blue (7.22%) because the human retina is most sensitive to green wavelengths.

Our tool exposes the exact Relative Luminance (L-value) for every token you input, allowing you to manually verify the math behind the matrix.

10Polarity Sensitivity in Contrast Algorithms

Polarity sensitivity refers to an algorithm's ability to differentiate between "Dark on Light" (positive polarity) and "Light on Dark" (negative polarity). The human eye suffers from light scatter when viewing bright text on dark screens, making thin fonts harder to read.

While WCAG 2.1 is polarity-ignorant, APCA introduces polarity sensitivity. This is why our heatmap matrix becomes asymmetrical when you switch to the APCA standard—reflecting the true biological reality of screen reading.

11The Future of WCAG Standards

WCAG 3.0 is currently in Working Draft status. It will fundamentally change how contrast is calculated by abandoning the 4.5:1 ratio in favor of a sliding scale of Lightness Contrast (Lc) scores. By integrating APCA now, you are future-proofing your enterprise design system against the next decade of accessibility legislation.

FAQFrequently Asked Questions

Why does a color pair pass in Light Mode but fail in Dark Mode?
The legacy WCAG 2.1 algorithm uses a simple, symmetric relative luminance ratio ((L1 + 0.05) / (L2 + 0.05)). However, human vision is non-linear and polarity-sensitive. A light text on a dark background is perceived differently than dark text on a light background. This is why a token combination that passes in light mode can mathematically fail when inverted, requiring separate dark mode token scales.
What is the difference between WCAG 2.1 and APCA (WCAG 3.0)?
WCAG 2.1 uses a static, symmetric contrast ratio (e.g., 4.5:1) based on pure math. APCA (Advanced Perceptual Contrast Algorithm) is the draft standard for WCAG 3.0. It models human visual perception logarithmically, taking into account font weight, font size, and contrast polarity (dark-on-light vs. light-on-dark). APCA is much more accurate for modern, colorful UI design systems.
What is Deuteranopia and why is it the default CVD simulation?
Deuteranopia (red-green color blindness) is the most common form of Color Vision Deficiency, affecting approximately 6-8% of men globally. By simulating Deuteranopia, you can verify if your semantic UI colors (like red for errors and green for success) remain distinguishable to users who cannot perceive those hues.
Do I need a 4.5:1 contrast ratio for disabled buttons?
Under WCAG 2.1 (Success Criterion 1.4.3), text that is part of an inactive user interface component (like a disabled button) is exempt from contrast requirements. However, usability best practices dictate that disabled elements should still be distinguishable from the background, even if they don't hit 4.5:1.
What is Non-Text Contrast (WCAG 1.4.11)?
WCAG 1.4.11 requires a minimum contrast ratio of 3.0:1 for active UI components and graphical objects. This means the border of a text input, the background of an active toggle switch, or a data visualization chart must maintain at least 3.0:1 contrast against adjacent colors to be legally accessible.
Why is testing a full N×N palette matrix necessary?
Modern design systems use overlapping layers: a modal over a dark overlay over an app background, with primary buttons containing text. A single contrast checker only tests one pair. An N×N matrix cross-references every token in your scale (e.g., Slate-50 to Slate-900) to instantly map out all safe permutations for your entire component library.
What does "Large Text" mean in WCAG terms?
For WCAG 2.1 AA, "Large Text" is defined as 18pt (24px) or larger, or 14pt (18.66px) if the text is bold. Large text only requires a 3.0:1 contrast ratio instead of the standard 4.5:1, allowing designers to use lower-contrast, aesthetic color pairings for major headings.
How does the Heatmap calculate the biological confusion matrix for CVD?
When a CVD mode like Protanopia or Tritanopia is active, the tool maps your hex values to sRGB space, linearizes them, applies a biological spectral confusion matrix (a mathematical transformation representing the missing retinal cones), and then recalculates the WCAG/APCA luminance of the resulting simulated colors.
Are design tokens better than hardcoded Hex values for accessibility?
Yes. Semantic design tokens (like `color-text-danger` or `color-surface-elevated`) separate the intent of a color from its exact hex value. If an accessibility audit reveals a failure, you can update the underlying token value once, and the math automatically corrects itself across the entire application interface.
What happens if my digital product fails an ADA or EAA accessibility audit?
Failing WCAG 2.1 AA standards can lead to costly demand letters and ADA lawsuits in the United States. In the European Union, the European Accessibility Act (EAA) enforces strict financial penalties and potential market bans for non-compliant digital platforms. Providing a full Contrast Heatmap demonstrates good-faith compliance effort.

Rate Palette Contrast Heatmapper

Help us improve by rating this tool.

4.8/5
1,048 reviews