Color Contrast Checker (WCAG) — Free Online Accessibility Tool
Check if your color combinations meet WCAG 2.1 accessibility standards. Calculate contrast ratios, preview text readability, simulate color blindness, and get suggestions for passing combinations. 100% client-side — no data leaves your browser.
How to Use the Color Contrast Checker
- Set foreground and background colors using the color pickers or hex input fields.
- Read the contrast ratio displayed prominently — WCAG requires 4.5:1 for normal text and 3:1 for large text.
- Check compliance badges — see at a glance which WCAG levels your combination passes.
- Preview your colors with normal text, large text, and UI elements like buttons and links.
- Simulate color blindness to ensure your design is accessible to users with vision deficiencies.
- Try preset combinations for inspiration or use the swap button to reverse colors quickly.
Understanding WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable for people with moderately low vision. These ratios are critical for compliance — and more importantly, for real-world usability.
Level AA (minimum): Normal text requires 4.5:1, large text (18pt+ or 14pt+ bold) requires 3:1.
Level AAA (enhanced): Normal text requires 7:1, large text requires 4.5:1.
Frequently Asked Questions
The contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black vs white). WCAG uses this ratio to determine if text is readable against its background.
Level AA is the legal minimum for most websites and regulations (ADA, Section 508, EAA). Level AAA is recommended for enhanced accessibility but not always required. For critical information like error messages and form labels, aim for AAA.
Yes. WCAG defines "large text" as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because thicker strokes are easier to read at lower contrast. Use the AA Large threshold for headings and AA Normal for body text.
Color blindness affects approximately 8% of men and 0.5% of women. The most common types (protanopia and deuteranopia) reduce the ability to distinguish red and green. Color blindness simulation shows how your design appears to these users, helping you ensure information isn't conveyed by color alone.
Common fixes: darken the text color, lighten the background, increase font weight, or add a text shadow/outline. The suggestion feature in this tool will find the closest passing color by adjusting lightness while preserving hue and saturation.
Use Cases
WCAG Compliance Check
Verify your text and background color combinations meet WCAG AA and AAA accessibility standards required by law for government and public websites.
Dark Mode Validation
Test your dark mode color palette to ensure text remains readable and passes accessibility contrast requirements against dark backgrounds.
Text Readability Testing
Check how readable your body text and headings are on any background color to prevent eye strain and ensure comfortable reading experiences.
Government Website Audit
Ensure your government or public-facing website meets Section 508 and ADA accessibility requirements with proper color contrast ratios.
Email Template Legibility
Verify that your email templates have sufficient contrast for text and call-to-action buttons across different email clients and devices.