Contrast Grid
Audit your entire color system. Check every interaction.
Continue with Related Tools
Every combination, checked instantly.
Building a Design System is hard. Ensuring every button, badge, and alert is accessible is even harder. You can check pairs one by one, or you can see the Big Picture.
Our Contrast Grid takes your palette and generates a full matrix. It exposes the hidden failures in your system—like that "Subtle Gray" text that becomes invisible on your "Light Gray" background.
Matrix View
Don't guess. See 100% of possible combinations validified in a single glance.
Bulk Import
Paste a comma-separated list of hex codes from Figma or CSS variables to populate instantly.
Live Preview
Click any cell to see a modal with real UI components using that color pair.
WCAG scoring
Clear badges for AA (Minimum) and AAA (Enhanced) compliance.
Why Audit Your Palette?
A common mistake in UI design is picking colors that look good in isolation but fail in context. Your "Brand Blue" might look great on white, but what happens when you use it for text on a "Light Blue" alert background?
The "Ghost Text" Pitfall
Using gray text on a gray background often fails contrast checks, making your app unusable outdoors or for users with older screens.
Can you read this?
The "Vibration" Pitfall
Using complementary colors (like Red text on Blue background) might pass math checks but cause "chromatic aberration" that hurts the eyes.
VIBRATING TEXT
Understanding the Standards
Enhanced Accessibility (7.0:1)
Required for government sites. Ensures readability for users with 20/80 vision.
Minimum Standard (4.5:1)
The legal requirement for most commercial websites (ADA, Section 508).
Large Text Exception (3.0:1)
Allowed only for text larger than 24px (or 19px bold). Good for headlines.
Related Tools
Frequently Asked Questions
What is a Contrast Grid?
A Contrast Grid (or Matrix) is a visualization tool that checks every color in your palette against every other color. If you have 10 brand colors, there are 100 possible combinations. This tool helps you instantly spot which pairs are safe for text and which are not.
What is the difference between AA and AAA?
AA (4.5:1) is the minimum standard for normal text under WCAG guidelines. It ensures readability for most people. AAA (7.0:1) is the gold standard, ensuring readability even for users with significant visual impairments or on low-quality screens.
Can I use 'Fail' colors for anything?
Yes! 'Fail' (below 3.0:1) just means you shouldn't use that combination for text. You can absolutely use low-contrast pairs for decorative elements, disabled buttons, subtle borders, or background patterns where reading is not required.
What is AA Large (3.0:1)?
WCAG allows lower contrast (3.0:1) for text if it is Large Scale. This is defined as 18pt (24px) regular weight or 14pt (19px) bold weight. Our grid marks this as 'AA+'.
How do I audit my Design System?
Paste all your brand tokens (primary, secondary, neutrals, feedback colors) into the input field. Look for the columns corresponding to your background colors (usually White, Light Gray, or Dark Navy). Ensure your Primary Brand color has at least AA contrast on white.
Does this support Dark Mode?
Yes. Just include your dark background colors (e.g., #121212) in the list. The grid will show you how your text colors perform against dark backgrounds. You'll often find that colors that work on Light Mode fail on Dark Mode, and vice versa.
Why is 4.5 the magic number?
It was chosen by the W3C based on the perceptual contrast needed by a person with 20/40 vision. It compensates for the loss of contrast sensitivity that comes with age or certain visual conditions.
What is APCA?
APCA (Advanced Perceptual Contrast Algorithm) is the proposed method for WCAG 3.0. Unlike the simple ratio math of WCAG 2.x, APCA considers font weight and size more holistically. While we currently use the standard ratio for legal compliance, APCA is the future of digital readability.
How many colors can I add to the grid?
There is no hard limit, but for practical visualization, we recommend 5-15 colors. Beyond 15 colors, the matrix becomes very large (15x15 = 225 cells). Focus on your core brand palette, neutrals, and feedback colors (success, warning, error).
Can I export my contrast grid results?
You can take a screenshot of the grid for documentation. For design systems, we recommend documenting passing combinations in your style guide. The interactive preview modal helps you visualize real UI components before finalizing your palette.
What is the difference between contrast ratio and luminance?
Luminance is a measure of how bright a color appears (0 = black, 1 = white). Contrast ratio is the comparison of relative luminance between two colors, expressed as a ratio like 4.5:1. Higher ratios mean greater visual distinction between text and background.
Why do some bright colors fail on white backgrounds?
Colors like yellow, cyan, or lime green have high luminance values similar to white, resulting in low contrast ratios. This is why yellow text on white is nearly invisible. For vibrant colors on light backgrounds, you often need to use darker shades or add a stroke/shadow.