Color Accessibility Checker — WCAG Contrast & Colorblind Simulation

A free WCAG 2.1 contrast checker for testing any color combination against accessibility standards. Verify text readability for Level AA and AAA compliance — essential for inclusive web design.

How to Use

Pick or enter foreground and background colors using the color pickers or hex/RGB inputs.

View the live text preview and check WCAG AA/AAA compliance results.

Review the color blindness simulation strip to see how each CVD type perceives your colors.

If any check fails, click a suggested alternative to instantly fix the color pair.

Use Bulk Palette mode to check all combinations from your design system palette.

Verify color pairs for WCAG contrast compliance and colorblind distinguishability

Pick two colors to check contrast ratio and colorblind visibility.

Foreground

Background

Large Text (18pt+)

Heading Preview

Normal Text (16px)

The quick brown fox jumps over the lazy dog.

Body text preview — how your users will see this color combination in real content.

WCAG 2.1 Contrast

AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

12.63:1

AA Normal Pass

AA Large Pass

AAA Normal Pass

AAA Large Pass

Color Blindness Simulation

How your color pair appears to people with different types of color vision deficiency.

Suggested Alternatives

Accessible color alternatives that pass WCAG AA and are distinguishable under all CVD types.

Bulk Palette Check

Paste 3–10 hex colors (one per line or comma-separated) to check all pair combinations.

Features

WCAG 2.1 contrast ratio with AA/AAA pass/fail badges Color blindness simulation for 4 CVD types (protanopia, deuteranopia, tritanopia, achromatopsia) Auto-suggest accessible color alternatives when a pair fails Bulk palette mode: check all pairs from 3–10 colors at once

Frequently Asked Questions

What is WCAG contrast ratio?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors. AA level requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA level requires 7:1 for normal and 4.5:1 for large text. Higher ratios mean better readability.

What is color blindness (CVD)?

Color Vision Deficiency (CVD) affects about 8% of males and 0.5% of females worldwide. The most common types are protanopia (red-blind) and deuteranopia (green-blind). This tool simulates how your color pairs look to people with each type, helping you design for everyone.

How does the auto-suggest feature work?

When your color pair fails WCAG or CVD checks, the tool searches for nearby colors that pass all criteria. It adjusts lightness while keeping the hue similar, so the suggested colors still match your design intent while being accessible.

What is Delta E and why does it matter?

Delta E (CIE2000) measures the perceptual difference between two colors. A Delta E below 1 means two colors are virtually identical to the human eye. For accessibility, we recommend a minimum Delta E of 10 between foreground and background under all CVD simulations to ensure distinguishability.

💡 Want us to improve this tool just for you?

We can — and it's free! Just send us a quick message with your idea. If you'd like to discuss it in detail, leave your email and we'll get back to you. You can stay anonymous.

How do you rate this tool?

Thank you for your rating!

Change my rating

Want to leave a comment?

Want to share more? Leave a comment!

Thank you! Your comment will appear after moderation.

Who is this tool for?

Published 08 Mar 2026 Updated 01 May 2026