About Color Contrast Matrix

Test WCAG contrast ratios for every color pair in a palette. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Auditing a design system palette for WCAG 2.1 compliance
• Testing all color pairings before a brand refresh
• Generating accessibility reports for client deliverables
• Validating dark mode color combinations meet contrast requirements

Tips

• Add your full brand palette to test all combinations at once
• Look for AAA ratings for body text and AA for large headings
• Export the matrix as a reference for your design system docs

Fun Facts

• WCAG 2.0 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, based on research by the W3C's Web Accessibility Initiative.
• Approximately 300 million people worldwide have color vision deficiency, making contrast ratios critical for inclusive design.
• The contrast ratio formula compares relative luminance values using a formula defined in WCAG 2.0, ranging from 1:1 (no contrast) to 21:1 (black on white).

FAQ

What does the matrix show?

Every color in your palette paired with every other — each cell shows the WCAG contrast ratio and pass/fail for text and UI.

Why do I need the full matrix?

Accessibility is about pairs, not individual colors. Your brand navy might have great contrast with white but fail against gray-200. The matrix surfaces these gaps instantly.

What thresholds does it use?

WCAG 2.1: 4.5:1 for body text, 3:1 for large text (18pt+ or 14pt bold) and UI components. AAA is 7:1 / 4.5:1 respectively.

Can I export the results?

CSV of pairs with ratios. Useful for design-system compliance reports or flagging which color combinations to avoid in components.