Color Contrast Checker — WCAG AA & AAA

What is WCAG and Why Accessibility Matters

The Web Content Accessibility Guidelines (WCAG) are an internationally recognised set of recommendations published by the World Wide Web Consortium (W3C) that define how to make web content more accessible to people with disabilities. First published in 1999 and now at version 2.2, WCAG has become the de facto standard referenced by accessibility laws worldwide.

At its core, WCAG is built around four principles — content must be Perceivable, Operable, Understandable, and Robust (POUR). Color contrast falls under Perceivable: if users cannot distinguish text from its background, none of your content's other qualities matter.

Globally, approximately 300 million people live with some form of color vision deficiency, and around 253 million have significant vision impairment. Poor contrast affects not only this group but also sighted users in challenging conditions — reading on a bright phone screen in sunlight, using an old monitor, or simply aging eyes that lose contrast sensitivity over time.

Beyond ethical responsibility, accessibility is increasingly a legal requirement. Websites and apps that fail accessibility standards expose organisations to legal risk under multiple jurisdictions. Our contrast checker gives you instant WCAG compliance feedback so you can make design decisions with confidence.

WCAG AA vs AAA: Which Level Do You Need?

WCAG defines three conformance levels — A (minimum), AA (standard), and AAA (enhanced). For color contrast, only AA and AAA have specific numeric requirements.

WCAG AA — The Universal Baseline. AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt or 14pt bold and above) and UI components such as form inputs, focus indicators, and icons that convey information. AA is the level required by most accessibility regulations and is a practical, achievable target for virtually all design systems.

WCAG AAA — The Gold Standard. AAA requires 7:1 for normal text and 4.5:1 for large text. W3C notes that it is not always possible to satisfy AAA for all content, so it is recommended for body copy and critical information rather than every element. Decorative graphics, logos, and inactive UI controls are exempt from both levels.

Practical guidance: Target AA as your minimum for all text and interactive elements. Aim for AAA on long-form body copy and anything critical — legal disclaimers, form labels, error messages. Mid-level UI chrome like placeholder text is acceptable at 3:1. Never accept below 3:1 for anything users need to read.

Use our Color Picker to explore individual colors and their inherent luminance values, which directly determine what contrast ratios are achievable.

Color Contrast in Legal Compliance: ADA, Section 508, and the EAA

Accessibility legislation is converging on WCAG AA as the minimum standard for digital products. Understanding which laws apply to your organisation helps you prioritise correctly.

Americans with Disabilities Act (ADA). While the ADA does not explicitly name WCAG, U.S. courts have increasingly applied it to private-sector websites under Title III, which prohibits discrimination in places of public accommodation. The DOJ issued guidance in 2022 affirming WCAG 2.1 AA as its recommended technical standard for web accessibility. Lawsuits against non-compliant sites number in the thousands annually in the United States.

Section 508 (U.S. Federal). Federal agencies and organisations receiving federal funding must comply with Section 508, which references WCAG 2.0 AA. This directly affects government websites, healthcare systems receiving Medicare/Medicaid funding, universities receiving Title IV funding, and contractors building software for federal clients.

European Accessibility Act (EAA). In force from June 2025, the EAA requires most consumer-facing digital products and services sold in the EU to meet WCAG 2.1 AA. This affects e-commerce, banking, transport, telecommunications, and more. The EAA covers private companies, unlike the earlier EU Web Accessibility Directive which applied only to public sector bodies.

EN 301 549 is the European standard that references WCAG 2.1 AA and applies to ICT products and services procured by European public sector bodies. If you are selling software to European governments, EN 301 549 compliance is mandatory.

How Color Blindness Affects Design

Color vision deficiency (CVD) affects approximately 8% of males and 0.5% of females of Northern European descent. The most common forms are red-green deficiencies, but there are three distinct categories, each affecting which wavelengths the eye perceives.

Protanopia (red-blind). People with protanopia lack functional long-wavelength (red) cone cells. They perceive reds as dark brown, cannot distinguish red from green, and often confuse blue-green with grey. This is the most severe red-green variant and affects about 1% of males. Traffic lights appear as yellow and dark, not red and green.

Deuteranopia (green-blind). The most common form of CVD — about 6% of males. Green cone cells are absent or non-functional. Like protanopia, reds and greens appear similar, but overall brightness perception is less affected. Deuteranopes often have difficulty with maps, charts, and status indicators that rely on red/green coding.

Tritanopia (blue-blind). A rarer condition (under 0.01% of the population) where blue cone cells are absent. Blues and greens appear similar; yellows and pinks may be confused. Tritanopia is not sex-linked and affects males and females equally. It can also be acquired through aging or certain medical conditions.

Design implications: Never rely on color alone to convey information. Always pair color with shape, texture, pattern, labels, or icons. Test your color combinations with our simulation panel above to see how they appear across all three major CVD types. A design that works for users with CVD almost always works better for everyone.

Our Color Palette Extractor can help you build accessible palettes starting from existing brand imagery.

Common Mistakes in Web Color Contrast

Even experienced designers make predictable contrast errors. Here are the most frequent pitfalls and how to avoid them.

1. Mid-tone text on mid-tone backgrounds. Colors in the 40–60% lightness range often fail on both white and dark backgrounds. This is the hardest problem to solve because brand colors often live in this range. The fix: either darken text significantly for use on white, or use the color as an accent rather than body text.

2. Placeholder text that meets no ratio. Placeholder text in form inputs is often set at 40–50% opacity or a mid-grey, giving ratios as low as 2:1. WCAG 1.4.3 exempts decorative elements but not placeholder text that conveys required format information. Aim for at least 4.5:1 even for placeholders.

3. Hover and focus states with insufficient contrast. Interactive element states must also meet 3:1 against their surroundings under WCAG 1.4.11. Designers often style focus rings with low-opacity blue that fails on blue backgrounds. Use high-contrast focus indicators — 3px solid with an offset works universally.

4. Relying only on brand colors. Many brand guidelines specify primary colors optimised for print or logo use that don't translate to accessible screen text. Extend your palette with accessible variants — darker versions for text on light backgrounds, lighter versions for text on dark.

5. Testing in ideal conditions. Designers typically view work on calibrated, high-end displays in controlled lighting. Real users might be on low-quality screens, outdoors, or using accessibility features that alter display output. Always test at the threshold, not just the ideal.

6. Ignoring dark mode. A color that passes in light mode may fail in dark mode if you simply invert backgrounds without recalculating contrast. Build dark mode palettes independently and verify each combination. Use our Gradient Generator to design accessible gradient-over-text treatments that work in both modes.

Frequently Asked Questions