The WCAG Contrast Checker is the most essential accessibility tool in any designer or developer's workflow. WCAG 2.1 defines minimum contrast ratios that ensure text and UI elements are readable by people with low vision, and increasingly, meeting WCAG AA standards is a legal requirement in the US, UK, EU, and many other jurisdictions.
The free Contrast Checker on FreeColorPalettes verifies any foreground-background color combination against WCAG 2.1 Level AA and Level AAA standards in real time. Enter your colors, see the contrast ratio, and get instant pass/fail results for normal text, large text, and UI components.
Understanding WCAG contrast requirements helps you make better design decisions — not just for compliance, but for readability and quality. A design that passes WCAG AA is simply more readable for everyone, not just users with visual impairments. Better contrast means less eyestrain, faster scanning, and clearer visual hierarchy.
What It Does
Enter a foreground color (text or icon) and background color, and the Contrast Checker instantly calculates the contrast ratio using the WCAG relative luminance algorithm. Results show pass/fail status for four levels: WCAG AA Normal Text (4.5:1), WCAG AA Large Text (3:1), WCAG AA UI Components (3:1), and WCAG AAA Normal Text (7:1). The tool also provides a visual preview showing how the color combination looks in real text at different sizes, making it easy to see the practical impact of the contrast ratio.
Who It's For
UI/UX designers verifying color combinations before handoff, front-end developers validating accessibility compliance, accessibility auditors reviewing existing products, and anyone building products that must meet WCAG, ADA, EN 301 549, or similar accessibility standards.
How to Use This Tool
- 1Open the Contrast Checker tool
- 2Enter or pick your foreground color (text or icon)
- 3Enter or pick your background color
- 4View the contrast ratio and pass/fail results for all WCAG levels
- 5Adjust either color until the combination meets your required standard
Related Tools
Useful For These Use Cases
Frequently Asked Questions
What contrast ratio does WCAG require?
WCAG 2.1 Level AA requires 4.5:1 for normal text (<18pt regular or <14pt bold) and 3:1 for large text (≥18pt regular or ≥14pt bold) and UI components. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How do I check color contrast?
Use the free Contrast Checker tool — enter your foreground and background colors in hex, RGB, or HSL format, and get instant contrast ratio results with WCAG pass/fail status. No account or sign-up required.
Is WCAG contrast legally required?
WCAG 2.1 AA compliance is referenced or required by ADA (US), EN 301 549 (EU), AODA (Canada), DDA (UK), and many other regional accessibility laws. For public-facing products, especially in government, healthcare, finance, and education, WCAG AA compliance is effectively mandatory.
What is the minimum contrast ratio for body text?
WCAG 2.1 AA requires 4.5:1 for body text (normal-weight text under 18pt). In practice, ratios of 7:1 or higher (approaching WCAG AAA) produce the most readable text for extended reading, especially on mobile devices at medium brightness.
Ready to try it?
Free, no sign-up, no ads. Works instantly in your browser.
Open WCAG Color Contrast Checker