Accessible Color Pair Grid - Online WCAG Matrix for Vision Deficiencies

WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility developed by the W3C. Adequate color contrast ensures that text and interactive elements are readable by users with visual impairments, including low vision, color blindness, and those using screens in bright sunlight. Meeting WCAG contrast requirements is also a legal requirement in many jurisdictions under accessibility laws like ADA and Section 508.

The contrast ratio is calculated using the relative luminance of the two colors. First, each color's sRGB values are linearized, then the relative luminance is computed as: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. This yields a value between 1:1 (identical colors) and 21:1 (pure black vs pure white). The formula accounts for human perception of brightness.

AA Level (minimum): Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (≥18pt or ≥14pt bold). This is the generally accepted minimum for web accessibility.
AAA Level (enhanced): Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. This is a stricter standard providing better readability for users with significant visual impairments.

Protanopia (red-blind): Absence of red cone photoreceptors. Reds appear dark or brownish, and red-green discrimination is severely impaired. Affects ~1% of males.
Deuteranopia (green-blind): Absence of green cone photoreceptors. Similar to protanopia in effect, greens appear beige or brownish. Most common type, affecting ~1.5% of males.
Tritanopia (blue-blind): Absence of blue cone photoreceptors. Blues appear greenish and yellows appear pinkish. Very rare, affecting ~0.003% of the population.
Achromatopsia (total color blindness): Complete absence of color perception; the world appears in shades of gray. Extremely rare, affecting about 1 in 30,000 people.

Use this tool to check your color pairs under different vision deficiency simulations. Aim for pairs that maintain a strong contrast ratio (≥4.5:1) even when simulated. Additionally: avoid relying solely on color to convey information; use patterns, icons, or text labels as supplements; test your designs with simulation tools; and consider using high-contrast color combinations like dark blue on white or black on light yellow, which tend to work well across all vision types.

Yes. When you switch to a vision deficiency mode in this tool, the contrast ratios are recalculated based on the simulated colors. This helps you understand whether a color pair that passes WCAG under normal vision remains distinguishable for users with color vision deficiencies. A pair that passes AA normally might fall below the threshold when simulated, indicating potential accessibility issues.

Some color pairs that perform well across all vision types include: Black (#000000) on White (#FFFFFF) – 21:1 contrast; Dark Navy (#1a237e) on White – ~15:1; White on Dark Blue (#0d47a1) – ~12:1; Dark Charcoal (#212121) on Light Gray (#f5f5f5) – ~15:1; and Dark Green (#1b5e20) on Off-White (#fafafa) – ~14:1. These combinations maintain high contrast even when simulated for most color vision deficiencies.

This tool uses established color transformation matrices based on the Brettel-Viénot-Mollon model and Machado et al. research on color vision deficiency simulation. While no simulation can perfectly replicate the experience of a color-blind individual, these models are widely used in accessibility tools and provide a reliable approximation for design decision-making. For critical applications, we recommend also testing with real users and dedicated accessibility auditing tools.