Palette Contrast Viewer
Visualize contrast levels between every color pair in your palette. Quickly spot inaccessible combinations before they reach production.
1.0 | 21.0 | |
21.0 | 1.0 |
Related Color Tools
What the Contrast Matrix Shows
This tool builds a grid showing the contrast ratio between every possible pair of colors in your palette. Instead of testing combinations one at a time, you see the entire accessibility landscape at once — making it easy to spot which color pairs work for text and which don't.
How to Read the Contrast Matrix
Each cell in the grid represents the contrast ratio between two colors. The row color and column color intersect at a cell showing their ratio. Color-coded badges indicate WCAG compliance: green for AAA, blue for AA, yellow for Fair (large text only), red for Poor.
The diagonal tells you something important
Cells along the diagonal (where a color meets itself) always show 1:1 contrast — because any color against itself has zero contrast. Use the off-diagonal cells to find usable combinations.
Who Needs a Contrast Matrix
Design System Builders
A design team is documenting their color tokens. They load all 12 brand colors into the matrix and discover that 3 of their "neutral" grays don't have enough contrast against white backgrounds. They adjust the values before publishing the system.
Accessibility Auditors
Someone is reviewing a website for WCAG compliance. They extract the site's color palette, load it here, and immediately see which text/background combinations fail. The matrix becomes their audit checklist.
Data Visualization Designers
A designer is creating a chart with color-coded categories. They need each category label to be readable against its background color. The matrix shows which category colors can safely contain white text and which need black.
Component Library Authors
Someone is building a React component library with themeable colors. They use the matrix to verify that every combination their users might choose still meets accessibility standards — preventing support tickets down the road.
Design Handoff Documentation
A designer includes the contrast matrix in their handoff docs so developers know which color combinations are safe. Instead of guessing or filing bugs, devs can reference the matrix directly.
Understanding WCAG Contrast Levels
AAA (7:1 or higher)
The gold standard for accessibility. Passes WCAG AAA requirements for all text sizes. Use for critical content, small text, or when designing for users with vision impairments.
Example: Pure black (#000000) on pure white (#FFFFFF) = 21:1
AA (4.5:1 or higher)
Minimum standard for normal text under 18pt. Required for most professional websites and apps under legal accessibility requirements.
Example: Dark gray (#333333) on white = 12.6:1
Fair (3:1 to 4.5:1)
Only passes for large text (18pt+ or 14pt+ bold). Acceptable for headings, buttons, and UI elements — not body copy.
Example: Medium gray (#666666) on white = 5.7:1
Poor (below 3:1)
Fails WCAG for any text use. Only use these color pairs for decorative elements, dividers, or non-text UI components.
Example: Light gray (#CCCCCC) on white = 1.6:1
Tips for Using the Contrast Matrix
Start with your full palette. Load all the colors you plan to use — backgrounds, text, accents, states. The matrix is most useful when you see every possible interaction.
Look for the green cells. These are your safe text/background combinations. If a color row has no green cells, that color probably shouldn't be used as a text color at all.
Watch out for adjacent lightness values. Colors that are close in lightness (like two medium grays) often fail contrast checks. The matrix makes these problem pairs obvious.
Use the color previews. The preview section at the bottom shows how each color looks with sample text and buttons. This helps you visualize real-world usage beyond just the numbers.
Iterate as you adjust. If a color fails, tweak it and re-add it to the palette. Watch how the entire row and column update — one change can fix multiple contrast issues.
Frequently Asked Questions
How many colors can I test at once?
There's no hard limit, but the matrix grows quadratically — 5 colors = 25 cells, 10 colors = 100 cells. For usability, stick to 6-8 colors max. If you have more, test in logical groups (neutrals together, accents together).
Why do some cells show the same ratio?
The matrix is symmetric — the contrast between color A and B is the same as B and A. So cells mirror across the diagonal. This isn't a bug; it helps you see patterns more easily.
Can I test more than just hex colors?
This tool currently accepts hex codes only. For RGB, HSL, or named colors, convert them to hex first using the Color Picker or one of the color format converter tools.
Does this guarantee my design is accessible?
No — this checks color contrast only. Accessibility also involves focus indicators, keyboard navigation, screen reader support, and more. But contrast is a critical piece, and this tool ensures you get that part right.
What if I need to test opacity combinations?
This tool tests solid colors only. For semi-transparent overlays, calculate the resulting color first (there are online calculators for this), then test that resulting color in the matrix.
How do I share my contrast matrix with my team?
Take a screenshot of the matrix, or copy the color list and have teammates load it themselves. For documentation, consider exporting your palette as CSS variables and including the matrix image alongside.
Why is the contrast calculation important?
The contrast ratio formula accounts for human perception of brightness differences. It's not just about lightness — the formula weights green higher than red, and red higher than blue, matching how human eyes actually perceive luminance.
When to Use This vs. Other Contrast Tools
Use this Contrast Viewer when you need to check all possible color pair combinations within a palette at once — ideal for comprehensive accessibility audits.
Use the Contrast Checker when you have one specific text/background pair to test and need detailed results with suggestions.
Use the Text Color Suggestion Tool when you have a background color and need recommendations for accessible text colors.
Use the Palette Comparison Tool when you want to compare overall palette statistics (average luminance, end-to-end contrast) rather than individual color pairs.
Other Free Color Tools
Color Contrast Checker — WCAG Compliance
Check the contrast ratio between text and background colors against WCAG AA and AAA accessibility standards. Ensure your designs are readable for all users.
Color Palette Comparison Tool
Compare multiple color palettes side by side to evaluate contrast, harmony, and consistency. Ideal for design reviews and A/B palette testing.
Text Color Suggestion Tool
Enter a background color and get instant suggestions for readable, accessible text colors. Designed to help you meet contrast requirements effortlessly.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.