Accessible Color Contrast Matrix – Online Paste Palette & Check

The WCAG (Web Content Accessibility Guidelines) color contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black vs pure white, maximum contrast). The ratio is calculated using the relative luminance of each color based on sRGB values linearized according to the WCAG 2.1 formula. A higher ratio means better readability for users with visual impairments.

AA Level (Minimum):

• Normal text (under 18pt/24px): 4.5:1 minimum contrast ratio
• Large text (18pt/24px bold or 24pt/32px regular): 3:1 minimum

AAA Level (Enhanced):

• Normal text: 7:1 minimum contrast ratio
• Large text: 4.5:1 minimum

Most websites aim for AA compliance as the practical standard. AAA is ideal but often challenging for design flexibility.

Using this tool is simple:

1. Paste your hex color palette into the text area — one color per line, or separated by commas/spaces.
2. Alternatively, click a preset button (Material, Ocean, etc.) or use the color picker to add individual colors.
3. The color strip shows all parsed colors. Hover over a swatch and click the ✕ to remove it.
4. The contrast matrix automatically generates, showing the contrast ratio for every color pair.
5. Each cell is color-coded: ■ AAA, ■ AA, ■ AA Large, ■ Fail.
6. Click any matrix cell to copy the ratio, or click a color swatch to copy its hex code.

Over 2.2 billion people worldwide have some form of vision impairment (WHO). Low color contrast makes text difficult or impossible to read for users with:

• Low vision or partial sight
• Color blindness (affects ~8% of males)
• Age-related vision decline
• Situational challenges like glare on mobile screens in sunlight

Beyond accessibility compliance (and avoiding lawsuits), good contrast improves user experience for everyone, reduces eye strain, and boosts content readability across all devices.

The WCAG 2.1 formula works in three steps:

1. Linearize sRGB: Convert each RGB channel (0–255) to a 0–1 range, then apply gamma correction. If channel ≤ 0.04045, divide by 12.92; otherwise, raise ((channel + 0.055)/1.055) to the power of 2.4.
2. Relative Luminance: L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
3. Contrast Ratio: (L_lighter + 0.05) ÷ (L_darker + 0.05)

This tool performs all calculations client-side in real-time, matching the official WCAG algorithm precisely.

This tool currently supports hexadecimal color codes:

• 6-digit hex: #1A73E8, 1A73E8 (with or without #)
• 3-digit shorthand: #F00 → expands to #FF0000
• Mixed delimiters: Paste colors separated by line breaks, commas, or spaces

Support for RGB, HSL, and named colors may be added in future updates. For now, convert other formats to hex for best results.

Contrast ratio (WCAG standard) focuses purely on luminance difference — how light or dark two colors appear. It's the official accessibility metric.

Color difference (sometimes calculated as Delta E or Euclidean distance in RGB space) considers hue and saturation differences too. Two colors can have high color difference but poor contrast ratio (e.g., bright red on bright green may have low luminance contrast despite being different hues).

For accessibility compliance, only the WCAG contrast ratio matters. This tool uses the official luminance-based formula.

Yes! This tool offers two export options:

• Export CSV: Download the full matrix as a CSV spreadsheet file, compatible with Excel, Google Sheets, and other tools. Great for documentation and team reviews.
• Copy Report: Copies a formatted text summary of all color pairs, their contrast ratios, and WCAG pass/fail status to your clipboard — perfect for pasting into design specs or accessibility audits.

All processing happens in your browser. No data is ever uploaded or stored on any server.