Contrast Matrix

Analyze WCAG contrast between all colors in your palette with an NxN matrix featuring text preview, ratios, statistics and quick copy

Create a visual WCAG contrast matrix between multiple colors. Ideal for verifying the accessibility of your complete design system.

Palette Presets

Manage Colors

Filter:

Contrast Matrix

BG / FG	#FFFFFF	#000000	#1E40AF	#DC2626	#059669
#FFFFFF	#FFFFFFL: 100%	Aa 21.00 AAA	Aa 8.72 AAA	Aa 4.83 AA	Aa 3.77 AA Large
#000000	Aa 21.00 AAA	#000000L: 0%	Aa 2.41 Fail	Aa 4.35 AA Large	Aa 5.57 AA
#1E40AF	Aa 8.72 AAA	Aa 2.41 Fail	#1E40AFL: 7%	Aa 1.81 Fail	Aa 2.31 Fail
#DC2626	Aa 4.83 AA	Aa 4.35 AA Large	Aa 1.81 Fail	#DC2626L: 17%	Aa 1.28 Fail
#059669	Aa 3.77 AA Large	Aa 5.57 AA	Aa 2.31 Fail	Aa 1.28 Fail	#059669L: 23%

WCAG Legend

AAA

Excellent for all text types

≥ 7:1

Valid for normal text

≥ 4.5:1

AA Large

Only for large text (18pt+)

≥ 3:1

Fail

Does not meet minimum standards

< 3:1

Palette Statistics

Accessibility Score

40% combinations pass AA+

AAA

20%

AA Large

20%

Fail

40%

Best Contrast

#FFFFFF+

#00000021.00:1

Worst Contrast

#DC2626+

#0596691.28:1

How it works

The contrast matrix is the most efficient way to validate the accessibility of an entire palette. Instead of checking color pairs one by one, this tool generates an NxN table that crosses all your colors as background and text, showing the WCAG level, exact ratio and a real preview for each combination.

Tool Features

Up to 10 simultaneous colors: Add colors with picker or by typing HEX directly
Automatic NxN matrix: Every color is crossed against all others as background/text
Real text preview: Each cell shows "Aa" with the actual background and text colors
Exact contrast ratio: Precise numeric value (e.g. 4.53) for each combination
WCAG badges per cell: AAA (≥7:1), AA (≥4.5:1), AA Large (≥3:1) or Fail
Click to copy ratio: Click any cell to copy the ratio to clipboard
Global statistics: Count and percentage of AAA, AA, AA Large and Fail combinations
Visual WCAG legend: Quick reference for what each level and color means
Live editing: Modify any color and the matrix recalculates instantly
Default starter colors: White, black and 3 common colors to get started quickly

How to Read the Matrix

Rows represent the background color (BG) and columns the foreground/text color (FG). Each cell shows how that text looks on that background:

Green (AAA ≥ 7:1): Excellent contrast. Valid for any text size, including small text. The highest readability level.
Lime (AA ≥ 4.5:1): Good contrast. The minimum recommended by WCAG for normal text (≥14px). Most websites should meet at least this level.
Yellow (AA Large ≥ 3:1): Only for large text (≥24px or ≥18.5px bold). Also valid for icons, input borders and focus states.
Red (Fail < 3:1): Doesn't meet any WCAG standard. Avoid this combination for any functional content.

Matrix vs Individual Calculator: When to Use Each?

Contrast matrix: When you need to validate a full palette (3-10 colors) and see all possible combinations at a glance. Ideal for audits, design systems and branding validation.
Contrast calculator: When you need to analyze a specific pair in detail — with APCA, auto-suggestion, UI component preview and multi-format. Ideal for fine-tuning.

WCAG 2.1 Standards — Quick Reference

The WCAG (Web Content Accessibility Guidelines) define minimum contrast requirements for web content to be readable by people with low vision or color blindness:

Normal text (≤23px): Minimum 4.5:1 (AA) — recommended 7:1 (AAA)
Large text (≥24px or ≥18.5px bold): Minimum 3:1 (AA) — recommended 4.5:1 (AAA)
UI components (icons, borders): Minimum 3:1 against adjacent background
Decorative text or logos: No contrast requirement

💡 Practical Use Cases

Case 1: Validate brand palette

Your brand has 5 corporate colors. You need to know which text/background combinations are accessible.

→ Load your 5 colors + white and black (7 total)
→ The matrix generates 42 combinations automatically
→ Green/lime cells are safe for text on your website
→ Statistics show your palette's compliance percentage

Case 2: Document design system

Your team needs a reference of which colors can be combined in the design system.

→ Load your system colors (primary, secondary, neutrals, alerts)
→ Take a screenshot of the matrix as visual reference
→ Include in documentation: "only use AA or higher combinations"
→ Check statistics: a good system has ≥60% valid combinations

Case 3: Web accessibility audit

You need to audit the current colors of an existing website.

→ Extract the main colors from your CSS (background, text, buttons, links, alerts)
→ Load them all into the matrix
→ Identify red combinations — those are the ones you need to fix
→ Adjust individual colors and watch ratios change in real time

Case 4: Evaluate generated palette

You generated a palette with our generator and want to verify its accessibility.

→ Copy colors from your generated palette
→ Paste them into the matrix along with white and black
→ If the Fail percentage is high, adjust the palette toward more contrast
→ An accessible palette should have ≤20% Fail combinations

Case 5: Dark mode vs light mode

Compare your palette's accessibility in both themes.

→ First: load text colors + light backgrounds → note statistics
→ Then: load text colors + dark backgrounds → note statistics
→ Compare AAA/AA percentages between both modes
→ It's common for dark mode to have worse contrast — adjust if needed

Frequently Asked Questions

How many colors can I analyze at once?

Up to 10 simultaneous colors, generating a matrix of up to 90 unique combinations (10×10 minus the diagonal). For most palettes (5-7 colors) this is more than enough.

Which combinations should I use for text?

Use green (AAA ≥7:1) or lime (AA ≥4.5:1) combinations for text of any size. Yellow ones (AA Large ≥3:1) only for large text (≥24px) or icons. Never use red (Fail) combinations for functional content.

Why isn't the matrix asymmetric?

It actually is symmetric — the contrast ratio between two colors is the same regardless of which is background and which is text. The matrix shows both directions so you can visualize the text preview in each direction (light text on dark vs dark text on light).

What percentage of valid combinations should my palette have?

There's no official number, but as a reference: a well-designed palette should have at least 50-60% AA or higher combinations. If your Fail percentage exceeds 30%, you probably need more contrast between your colors.

Should I always include white and black in the matrix?

Highly recommended. White (#FFFFFF) and black (#000000) are almost always the main background and text colors on a website. Including them gives you a realistic view of how your brand colors work in the most common context.

What's the difference between this matrix and the contrast calculator?

The matrix analyzes ALL combinations of your palette at once (NxN). The contrast calculator analyzes ONE color pair in detail with APCA, auto-suggestion and UI component preview. Use the matrix for full palette validation and the calculator for fine-tuning.

Are the colors saved?

Currently colors are kept while the page is open. If you reload, the 5 default colors are restored (white, black, blue, red, green). You can note down your palette's HEX values to load them quickly.

Is WCAG compliance mandatory for my website?

In the EU, the Web Accessibility Directive requires it for government sites and large companies. In the US, the ADA has been interpreted as applicable to websites. Even without legal requirements, meeting WCAG AA improves user experience for everyone — not just people with visual disabilities.