Check Color Contrast for WCAG Compliance
Enter or pick any foreground and background color and get the WCAG contrast ratio instantly. See AA and AAA pass/fail results for normal and large text, with a live text preview at multiple sizes.
About this tool
Designing for WCAG color contrast
WCAG 2.1 contrast requirements: AA vs. AAA
The WCAG 2.1 specification defines two conformance levels for color contrast:
- AA — 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). The legal minimum in the US (ADA), EU (EN 301 549), Canada (AODA), and the UK.
- AAA — 7:1 for normal text, 4.5:1 for large text. The gold-standard threshold for high-stakes interfaces — government services, medical devices, financial software.
The 3:1 rule also applies to "non-text content" — icons, focus indicators, form-field borders, and any UI affordance a user needs to be able to see and act on.
Why accessible color contrast matters
An estimated 2.2 billion people worldwide have some form of vision impairment, from age-related macular degeneration to color blindness affecting roughly 1 in 12 men. Designing for WCAG contrast doesn't just unlock legal compliance — it makes the product usable for a meaningful share of your actual audience.
It also makes the product more usable for every user in suboptimal conditions: direct sunlight on a phone screen, a presenter cable adapter washing out the projector, a cheap office monitor with a 50% backlight. Higher contrast is a tide that lifts every boat.
Designing beautiful UIs that pass accessibility audits
The biggest accessibility mistake we see in delivered designs is placeholder grey on white at around 3.5:1 — fails AA. Light grey on light grey, gradients with low-contrast text overlay, and brand colors that look great in the design file but disappear on a real monitor are close seconds.
MarkupFox reviews every foreground/background color pair against WCAG 2.1 AA before delivering an HTML build. Accessibility isn't a checklist item we add at the end — it's a constraint we design against from the first line of CSS. See our Design to HTML service.
FROM THE TEAM THAT BUILT THIS TOOL
We check contrast on every delivery.
MarkupFox reviews every color pair against WCAG 2.1 AA before delivery. Accessible HTML isn't a checkbox — it's baked into our process from the first line of CSS.
Clean up minified or AI-generated HTML. Configurable indentation.
Remove whitespace, comments, and redundant code. Typically 30–70% smaller.
Convert pixel values with a Tailwind spacing reference alongside.
Drag and drop. Get a data URI for inline embedding.
SEO + Open Graph + Twitter Card with live SERP preview.
Frequently asked questions
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility. Contrast ratios ensure text is readable by people with low vision or color blindness. Many countries require WCAG AA compliance by law.
What contrast ratio is required for WCAG AA?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). This is the minimum required by most accessibility legislation including ADA (US), EN 301 549 (EU), and AODA (Canada).
What is "large text" in WCAG terms?
Large text is defined as 18pt (≈24px) or larger at normal weight, or 14pt (≈18.67px) or larger when bold. Large text can pass at the lower 3:1 threshold because size improves readability at lower contrast.
Should I aim for AA or AAA?
AA is the legal and practical minimum. AAA (7:1 for normal text) is recommended for body copy on high-stakes interfaces like healthcare or government sites. Pure black on white (21:1) is the highest possible ratio.
Does this apply to icons and graphics too?
Yes — WCAG 2.1 AA requires a 3:1 contrast ratio for "non-text content" (icons, charts, form-field borders, focus indicators). The same calculation applies: pick the foreground color, pick the background, check the ratio.
How is the contrast ratio calculated?
The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the darker. Luminance is a perceptual measure that accounts for how the human eye weights red, green, and blue. This tool implements the WCAG 2.1 algorithm exactly.