Free WCAG Color Contrast Checker Tool
Ensuring accessible color combinations is essential for modern web design. This free Color Contrast Checker goes beyond a basic pass/fail: it checks text contrast, non-text (UI component) contrast, and shows an approximate preview of how your colors look to people with color vision deficiencies — helping designers, developers, and content creators meet WCAG and ADA accessibility standards.
Why Web Accessibility & Color Contrast Matters
Poor contrast makes text difficult or impossible to read for users with low vision, color blindness, or age-related visual impairments. Maintaining a strong contrast ratio brings multiple benefits:
- Improved Readability: High contrast allows users to scan and consume content effortlessly across various screen lighting conditions.
- ADA & WCAG Compliance: Helps protect your website from legal issues by meeting web accessibility guidelines.
- Better User Experience (UX): Good contrast creates a clean, legible, and professional look for all visitors.
Understanding WCAG 2.1 Contrast Guidelines
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio thresholds to evaluate text legibility:
- Level AA (Minimum Standard): Requires a contrast ratio of at least 4.5:1 for normal text and 3.0:1 for large text (18pt / 24px or 14pt bold / 18.5px bold).
- Level AAA (Enhanced Standard): Requires a contrast ratio of at least 7.0:1 for normal text and 4.5:1 for large text.
- Non-text Contrast (WCAG 1.4.11): A separate, lower 3:1 threshold for button borders, form-field outlines, focus indicators, icons, and other UI components — most contrast checkers skip this and only test body text.
Common Contrast Mistakes (Real Ratios)
These are combinations designers reach for constantly. Every ratio below was calculated with the same WCAG relative luminance formula the tool above uses, so you can see exactly where the line between pass and fail sits.
#000000 / #FFFFFF
21.0:1
Pass (AAA)
Maximum possible contrast — pure black text on pure white.
#767676 / #FFFFFF
4.54:1
Pass (AA only)
The often-cited "just barely passing" mid-gray. It fails AAA.
#AAAAAA / #FFFFFF
2.32:1
Fail
A very common mistake: light gray body text on a white card.
#FFFFFF / #CCCCCC
1.61:1
Fail
White text on a light gray button — a frequent UI bug.
#FFFF00 / #FFFFFF
1.07:1
Fail
Yellow text on white is nearly invisible. Avoid this pairing entirely.
#2563EB / #FFFFFF
5.17:1
Pass (AA), Fail (AAA)
A typical brand blue: fine for AA body text, not strict enough for AAA.
Designing for Color Blindness
Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency. A contrast ratio that passes WCAG can still be hard to distinguish for these users if color is the only signal being used.
- Protanopia & Deuteranopia: The two forms of red-green color blindness, and the most common types overall.
- Tritanopia: A rarer blue-yellow color vision deficiency.
- Never rely on color alone: Pair color-coded information (like error/success states or chart legends) with icons, text labels, or patterns as well.
How to Check Color Contrast Step-by-Step
- Pick your colors: Use the visual pickers, type a Hex/RGB/HSL value, or click a quick-test preset.
- Read the ratio & badges: The ratio updates instantly, along with pass/fail badges for AA, AAA, and non-text (UI) contrast.
- Fix a failing combination: Click "Suggest an Accessible Shade" to get the closest passing version of your foreground color.
- Check color blindness impact: Scroll to the preview grid to see how the same colors look under protanopia, deuteranopia, tritanopia, and grayscale.
- Save your result: Use "Copy as CSS" to grab the color values, or "Copy Share Link" to send this exact combination to a teammate.
Choosing Accessible Text Colors for Your Fonts
A beautiful typeface can still fail an accessibility audit if it is set in the wrong color. Thin, decorative, or script-style fonts especially need higher contrast than the WCAG minimum to stay legible at small sizes.
Check your text and background colors here first, then head to our font generator to preview how the pairing looks across different typefaces.
Frequently Asked Questions
What contrast ratio do I need to pass WCAG?
WCAG 2.1 Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt/24px, or bold 14pt/18.66px). Level AAA raises those minimums to 7:1 and 4.5:1.
Do I need to meet AAA, or is AA enough?
Most legal and regulatory requirements, including the ADA and Section 508, reference WCAG 2.1 Level AA. AAA is recommended where it is practical to achieve, but it is rarely a strict requirement for an entire site.
What is "non-text contrast" (WCAG 1.4.11)?
It is a separate, lower threshold of 3:1 that applies to user interface components — button borders, form-field outlines, focus indicators — and to meaningful graphical objects like icons and chart elements, rather than to body text.
Does passing contrast automatically make my site colorblind-friendly?
No. Contrast ratio and color blindness are related but separate concerns. Color should never be the only way information is conveyed — pair it with icons, text labels, or patterns, and use the color vision deficiency preview above to check how your palette actually looks.
Can I enter RGB or HSL values instead of a hex code?
Yes. The color fields accept hex codes, rgb()/rgba(), and hsl()/hsla() strings — paste any of them in and the tool converts it automatically.
Is this tool free, and does it store the colors I test?
Yes, it is free and unlimited. Every calculation runs locally in your browser with JavaScript, so your colors are never uploaded to or stored on a server.