Color Contrast Matrix Guide

A palette can look balanced while several foreground and background combinations remain unreadable. Checking every pair exposes which colors can safely work together for text and interface states.

How to use the Color Contrast Matrix

1. Enter four valid hexadecimal colors.
2. Run the matrix to calculate the contrast ratio for each pair.
3. Use the AA and AAA indicators to choose combinations for normal or large text.

A practical example

Black and white produce a 21:1 ratio. Mid-tone colors that look different may still fall below 4.5:1 and fail the common AA threshold for normal text.

The Color Contrast Matrix runs locally in the browser, so the input is available for the calculation without being uploaded by this tool.

Checks before you use the output

• Normal text generally needs at least 4.5:1 for WCAG AA.
• Large text has a lower 3:1 AA threshold.
• Contrast compliance does not replace checks for focus, color blindness, and non-color cues.

Use the result as part of a review

Compare every pair in a small palette using WCAG contrast ratios. The output is designed to make a small task faster, but it should still be checked against the requirements of the destination system, document, or decision.

Privacy and safe sample data

Processing happens in the current browser tab. Even so, remove passwords, authorization values, customer records, and other confidential data before copying results into chat, tickets, or public examples.