🎨 Advanced Color Contrast Matrix

Color contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black vs pure white, maximum contrast). The WCAG (Web Content Accessibility Guidelines) uses this ratio to determine whether text is readable against its background. The formula considers the relative luminance of each color based on the sRGB color space.

AA Level (minimum): Normal text requires a contrast ratio of at least 4.5:1, while large text (18px+ bold or 24px+ regular) requires 3:1.

AAA Level (enhanced): Normal text requires a contrast ratio of at least 7:1, while large text requires 4.5:1. AAA is the highest accessibility standard and is recommended for users with low vision or color vision deficiencies.

The WCAG formula first converts sRGB color values to linear RGB, then calculates relative luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The contrast ratio is (L₁ + 0.05) / (L₂ + 0.05), where L₁ is the luminance of the lighter color and L₂ is the darker color. This tool performs these calculations automatically for every color pair in your palette.

A contrast matrix lets you test every possible color combination in your palette at once, rather than checking pairs one by one. This is essential for UI/UX designers building design systems, as it quickly reveals which color combinations are safe for text, buttons, cards, and other interface elements. It helps ensure your entire palette is accessible before implementation.

Most design systems use 3–12 core colors. With 5 colors you have 10 unique pairs to check; with 10 colors, 45 pairs. This tool handles palettes of any size, but for practical UI design, we recommend keeping your core palette focused. A well-chosen palette of 5–8 colors with good mutual contrast provides excellent flexibility while remaining manageable.