Check Color Contrast
Verify that your text and background colors meet WCAG 2.1 accessibility standards. Results update in real time.
What is a Color Contrast Checker?
A color contrast checker evaluates the difference in perceived luminance between two colors (typically text and its background) and determines whether the combination meets WCAG (Web Content Accessibility Guidelines) accessibility standards. This ensures that content is readable by users with low vision, color vision deficiencies, or those viewing screens in challenging lighting conditions.
How It Works
This tool uses the official WCAG 2.1 relative luminance formula to calculate the contrast ratio between your selected colors. The calculation involves converting sRGB values to linear luminance, weighting red, green, and blue channels according to human perception (0.2126 red + 0.7152 green + 0.0722 blue), then computing the ratio as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker color.
WCAG Compliance Levels
- Level AA (Minimum Standard) — Normal text requires 4.5:1, large text (18pt+ or 14pt+ bold) requires 3:1. This is the legal minimum for most websites (ADA, Section 508, European Accessibility Act).
- Level AAA (Enhanced) — Normal text requires 7:1, large text requires 4.5:1. This is the gold standard for accessibility and is recommended for government, healthcare, and educational sites.
- UI Components — Under WCAG 2.1, user interface components and graphical objects require at least 3:1 contrast against adjacent colors.
Why This Tool Beats AI
AI language models frequently hallucinate color math — they guess contrast ratios rather than computing them. The WCAG relative luminance formula requires precise floating-point arithmetic that AI models get wrong in 30-60% of cases. This tool uses the exact WCAG 2.1 formula in your browser, giving you pixel-perfect accuracy every time. No server, no AI, no errors.
Common Use Cases
- Check brand colors before committing to a design system
- Verify Tailwind CSS or Material Design color pairs pass AA standards
- Fix Lighthouse accessibility audit failures in your web projects
- Validate dark mode color combinations before production deployment
- Test placeholder text and disabled state colors in form components
- Ensure government or healthcare websites meet legal accessibility requirements
Frequently Asked Questions
What is a good contrast ratio?
A minimum contrast ratio of 4.5:1 is required for normal text under WCAG AA, and 7:1 under AAA. For large text (18pt+ or 14pt+ bold), 3:1 (AA) and 4.5:1 (AAA). Ratios above 7:1 provide excellent readability for most users.
How is contrast ratio calculated?
The WCAG 2.1 formula first converts sRGB values to relative luminance using a non-linear transformation (gamma correction), then applies the formula: (Lighter + 0.05) / (Darker + 0.05). The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
Does this apply to logos and decorative elements?
No, text that is part of a logo or brand name has no minimum contrast requirement under WCAG 2.1. However, UI components like buttons, input borders, and meaningful icons must meet at least 3:1 against adjacent colors.
What if my brand colors fail accessibility?
You don't need to change your brand completely. Use these colors for headlines and large display text (which have a lower 3:1 threshold under AA), and choose a darker or lighter variant for body text. Our tool helps you find the nearest passing color.
Is this tool free to use?
Yes, completely free. No signup, no usage limits, no hidden features. Everything runs in your browser — your colors never leave your device. 100% private and accessible.