What is a Color Palette Contrast Matrix?

A contrast matrix is a cross-comparison table that tests every color in your brand palette against every other color as both background and foreground text, instantly identifying which color combinations meet accessibility guidelines.

What are the WCAG 2.1 AA and AAA contrast ratio thresholds?

Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires a stricter 7:1 for normal text and 4.5:1 for large text.

How many colors can I test in the matrix simultaneously?

You can evaluate between 2 and 6 colors at once, generating up to 36 pairwise combinations in a clear, responsive table.

Why does the diagonal row say "Self (1.00:1)"?

The diagonal represents a color tested against itself (e.g. black text on a black background), which has a 1:1 contrast ratio and cannot be read.

Is any of my brand or client color data uploaded to a server?

No. All calculations and luminance algorithms run entirely on your device inside your web browser.

Color Palette Contrast Matrix

Test an entire palette of brand colors in a cross-comparison matrix for WCAG 2.1 AA and AAA accessibility.

100% free
Private in browser
No signup
No watermarks

Passing AA Combinations: 10 / 20

Palette Swatches

#0f172a

#ffffff

#2563eb

#059669

#f1f5f9

WCAG 2.1 Contrast Ratio Matrix (Text on Background)

Background ↓ / Text →	Dark Slate#0f172a	Pure White#ffffff	Electric Blue#2563eb	Emerald#059669	Light Gray#f1f5f9
Dark Slate	1.00:1 (Self)	Aa (17.85:1) AA ✓AAA ✓	Aa (3.45:1) AA ✗AAA ✗	Aa (4.74:1) AA ✓AAA ✗	Aa (16.3:1) AA ✓AAA ✓
Pure White	Aa (17.85:1) AA ✓AAA ✓	1.00:1 (Self)	Aa (5.17:1) AA ✓AAA ✗	Aa (3.77:1) AA ✗AAA ✗	Aa (1.1:1) AA ✗AAA ✗
Electric Blue	Aa (3.45:1) AA ✗AAA ✗	Aa (5.17:1) AA ✓AAA ✗	1.00:1 (Self)	Aa (1.37:1) AA ✗AAA ✗	Aa (4.72:1) AA ✓AAA ✗
Emerald	Aa (4.74:1) AA ✓AAA ✗	Aa (3.77:1) AA ✗AAA ✗	Aa (1.37:1) AA ✗AAA ✗	1.00:1 (Self)	Aa (3.44:1) AA ✗AAA ✗
Light Gray	Aa (16.3:1) AA ✓AAA ✓	Aa (1.1:1) AA ✗AAA ✗	Aa (4.72:1) AA ✓AAA ✗	Aa (3.44:1) AA ✗AAA ✗	1.00:1 (Self)

AA Normal Text: ≥ 4.5:1AA Large Text (18pt+): ≥ 3.0:1AAA Normal Text: ≥ 7.0:1

Rate this tool

Be the first to rate — helps others and improves this page.

About Color Palette Contrast Matrix

Testing accessible color contrast between two colors is simple, but how do you verify an entire design system palette? The Color Palette Contrast Matrix evaluates all combinations across 2 to 6 brand colors in an interactive cross-comparison grid. It calculates exact W3C contrast ratios and flags WCAG 2.1 AA and AAA pass/fail compliance for both normal and large display typography.

How to use Color Palette Contrast Matrix

Add, edit, or customize up to 6 brand colors using the hex inputs or visual color swatches.
Inspect the generated contrast grid where rows represent background colors and columns represent text colors.
Check individual cell badges indicating WCAG AA (≥ 4.5:1) and AAA (≥ 7.0:1) pass or fail compliance.
Copy the overall palette summary to document accessible design system combinations for your team.

Key features

Interactive N × N contrast matrix evaluating all pairwise text-on-background combinations
Precise WCAG 2.1 relative luminance and contrast ratio calculations
Pass / Fail indicator badges for AA Normal (4.5:1), AA Large (3.0:1), and AAA (7.0:1)
Live visual swatch rendering within every cell showing actual readability
100% free client-side accessibility audit tool running privately in your browser

Frequently asked questions

What is a Color Palette Contrast Matrix?: A contrast matrix is a cross-comparison table that tests every color in your brand palette against every other color as both background and foreground text, instantly identifying which color combinations meet accessibility guidelines.
What are the WCAG 2.1 AA and AAA contrast ratio thresholds?: Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires a stricter 7:1 for normal text and 4.5:1 for large text.
How many colors can I test in the matrix simultaneously?: You can evaluate between 2 and 6 colors at once, generating up to 36 pairwise combinations in a clear, responsive table.
Why does the diagonal row say "Self (1.00:1)"?: The diagonal represents a color tested against itself (e.g. black text on a black background), which has a 1:1 contrast ratio and cannot be read.
Is any of my brand or client color data uploaded to a server?: No. All calculations and luminance algorithms run entirely on your device inside your web browser.