Free WCAG Color Contrast Checker
Check if your foreground and background colors meet WCAG 2.1 accessibility standards. Get the exact contrast ratio and pass/fail for AA and AAA compliance.
The quick brown fox
Aa — Normal text (18px). This text demonstrates how your color combination reads at typical body copy size.
Small text (14px). This is even harder to read at low contrast. Accessibility standards are most strict here.
Extra small (12px). Use with caution — even high-contrast combinations can feel strained at this size.
Contrast Ratio
17.40:1
WCAG 2.1 Compliance
Large text = 18pt (24px) or larger, OR 14pt (18.67px) or larger if bold.
Relative luminance: Foreground 0.0103 · Background 1.0000
All calculations run in your browser. No data is sent to any server.
Frequently Asked Questions
What is WCAG contrast ratio?+
WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between foreground and background colors, expressed as a ratio like 4.5:1. It ranges from 1:1 (no contrast, identical colors) to 21:1 (black on white, maximum contrast). Higher ratios are more readable, especially for users with visual impairments.
What contrast ratio is required for WCAG AA compliance?+
WCAG 2.1 Level AA requires: normal text (below 18pt or 14pt bold) — minimum 4.5:1 ratio. Large text (18pt or larger, or 14pt bold) — minimum 3:1 ratio. Most body text qualifies as "normal text." These are the most widely enforced accessibility standards.
What contrast ratio is required for WCAG AAA compliance?+
WCAG 2.1 Level AAA requires: normal text — minimum 7:1. Large text — minimum 4.5:1. AAA is the strictest level. Most organizations target AA compliance as the baseline, with AAA as an aspirational goal for critical content.
Why does accessibility contrast matter?+
Approximately 300 million people worldwide have color blindness, and 246 million have low vision. Insufficient contrast makes text unreadable for these users — and for anyone reading on a bright screen in sunlight. Many jurisdictions (US, EU, UK) also have legal accessibility requirements (ADA, EN 301 549, WCAG) that apply to websites.
How is contrast ratio calculated?+
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance is computed from the sRGB values of the color after gamma correction, weighted by how human vision perceives R, G, and B channels differently (0.2126R + 0.7152G + 0.0722B).
Does contrast ratio apply to icons and UI elements?+
WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 contrast ratio for UI components and graphical elements against adjacent colors. This applies to borders on inputs, icons, and focus indicators. The standard 4.5:1 applies to text.
Color Accessibility: What Developers and Designers Need to Know
Color contrast is one of the most frequently cited accessibility failures in web audits. Approximately 8% of males and 0.5% of females have some form of color vision deficiency. More broadly, 246 million people worldwide have moderate to severe visual impairment. Insufficient contrast makes text literally unreadable for these users — and can also cause problems for anyone reading on a high-glare screen, in bright sunlight, or on a low-quality display.
WCAG 2.1 AA: the practical standard for most websites
WCAG 2.1 Level AA is the standard referenced by most legal accessibility requirements, including the ADA (Americans with Disabilities Act), Section 508 (US federal government), EN 301 549 (European standard), and the UK Equality Act. AA compliance requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). In practice, this means your body text color must be significantly darker or lighter than the background — medium grays on white backgrounds are a common failure point.
How to fix contrast failures
The fastest way to fix a failing contrast ratio is to adjust the lightness of one of the two colors without changing its hue. Darkening text by reducing its HSL lightness value, or lightening a background, typically resolves contrast failures without changing the visual design significantly. A 4.5:1 ratio is achievable with many color combinations — for example, #767676 (medium gray) on white (#ffffff) passes at exactly 4.48:1 (fails AA by a hair), but #757575 fails. Bumping to #6d6d6d gets you to 5:1 and comfortably passes. Use this checker alongside the Color Picker to explore adjusted palettes.
The math: how contrast ratio is calculated
WCAG defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance values of the two colors, with L1 being the lighter color. Relative luminance is a linearized measure of how bright a color appears to the human eye. It is not simply the average of the RGB values — the formula accounts for gamma correction and the fact that human eyes are much more sensitive to green light than red or blue. A white (#ffffff) has luminance 1.0, pure black (#000000) has luminance 0.0, and their contrast ratio is 21:1 (the maximum possible). Pure red (#ff0000) on white is only 3.998:1 — failing AA for normal text.