WCAG Color Contrast Checker
Pick any two colors — see your WCAG 2.1 AA & AAA pass/fail status instantly. Free, private, no upload, no signup.
Why color contrast matters
Roughly 300 million people have color vision deficiency globally, and many more experience low contrast as a problem in bright sunlight or on low-quality displays. WCAG 2.1 specifies minimum contrast ratios so that text remains legible for the widest possible audience.
The most commonly required level, AA, mandates a 4.5:1 ratio for normal text and 3:1 for large text. The stricter AAA level requires 7:1 and 4.5:1 respectively.
When you need to check contrast
- 🎨 During design — before finalising colors in Figma or Sketch
- 🧑💻 During development — when Lighthouse or axe-core flags a violation
- 📋 For compliance audits — to document ADA or European Accessibility Act pass/fail
- 🔄 After rebranding — to verify new brand colors meet the standard
The legal context
The European Accessibility Act came into force on 28 June 2025, requiring most digital products and services in the EU to meet WCAG 2.1 AA. In the US, over 4,600 ADA lawsuits were filed in 2024 — a 22% year-over-year increase — with color contrast cited in the majority of demand letters. Checking contrast before you ship is the cheapest insurance against remediation costs.
Frequently Asked Questions
What is a WCAG color contrast ratio?
The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the perceived luminance difference between a text color and its background. It ranges from 1:1 (identical colors) to 21:1 (black on white). A higher ratio means more readable, accessible text.
What ratio do I need to pass WCAG AA?
For WCAG 2.1 Level AA: normal text (below 18 pt or 14 pt bold) requires a 4.5:1 ratio; large text (18 pt+ regular or 14 pt+ bold) and UI components such as icons and input borders require 3:1.
What is the difference between WCAG AA and AAA?
Level AA is the baseline legal requirement. Level AAA is enhanced: 7:1 for normal text, 4.5:1 for large text. Most teams target AA; AAA is recommended for text-heavy or high-stakes content (government, healthcare).
What counts as "large text" in WCAG?
WCAG defines large text as 18 pt (24 px) or larger at normal weight, or 14 pt (~18.67 px) or larger at bold weight. Everything smaller is considered normal text.
Is color contrast legally required?
Yes, in many jurisdictions. The ADA and Section 508 (US) and the European Accessibility Act (in force June 2025) reference WCAG AA as the compliance baseline. Over 4,600 ADA accessibility lawsuits were filed in 2024, with contrast failures cited in the majority of demand letters.
How does the "suggest fix" feature work?
When your text color fails AA normal text (4.5:1), the tool binary-searches for the closest lightness value that passes — keeping your original hue and saturation intact so the result stays on-brand.
Can I share my color pair with a teammate?
Yes. The colors are encoded in the URL hash (e.g. #fg=1a1a1a&bg=ffffff) whenever you change them. Copy the URL from your browser address bar to share an exact result — no login, no generated link.
Does this tool store or upload my colors?
No. All calculations run in your browser with zero network calls. The URL hash is the only "storage" — it lives in your browser bar and goes nowhere else.