WCAG Contrast Checker
Check the contrast ratio between foreground and background colors for WCAG AA and AAA accessibility compliance.
The quick brown fox jumps over the lazy dog
Small text preview at 12px
How to Use
- 1. Set the foreground (text) color using the color picker or type a HEX value.
- 2. Set the background color the same way.
- 3. The contrast ratio is calculated instantly and the live preview shows how text will appear.
- 4. Check the WCAG badges to see which accessibility levels your colors pass or fail.
About WCAG Contrast Checker
Web accessibility is a legal and ethical requirement for modern websites. The Web Content Accessibility Guidelines (WCAG) 2.1 specifies minimum contrast ratios to ensure text is legible for users with low vision or color blindness. This tool helps you verify compliance instantly.
The contrast ratio formula is defined by the WCAG specification and uses the relative luminance of each color. Luminance is calculated by converting sRGB values to linear light values and applying human vision weighting coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue). The ratio ranges from 1:1 (identical colors) to 21:1 (pure black on white).
Level AA is the standard compliance target for most websites and requires 4.5:1 for body text and 3:1 for large text (18pt+ or bold 14pt+). Level AAA is the enhanced standard at 7:1 for body text. UI components like form controls and focus indicators require at least 3:1 under WCAG 2.1 Success Criterion 1.4.11.
You may also find our Accessible Color Finder, Color Palette Generator, and Color Blindness Simulator helpful.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratio as a measure of the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast) to 21:1 (black on white).
What is the AA standard?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt or 14pt bold). Most websites target AA compliance.
What is the AAA standard?
WCAG 2.1 Level AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is the highest level of compliance and is recommended for critical content like government or medical sites.
What counts as large text?
Large text is defined as 18pt (approximately 24px) or larger, or 14pt (approximately 18.67px) bold or larger. Text above these thresholds has a lower contrast requirement.
Why does text contrast matter?
Low contrast text is difficult to read for people with low vision, color blindness, or when viewing screens in bright sunlight. Accessible contrast improves usability for all users, not just those with disabilities.
Was this tool helpful?
More Tools
Related Color Tools
Color Palette Generator
Image Color Extractor
Color Shades Generator
CSS to Tailwind Color
You Might Also Like