Preview Text
This is what your text looks like on this background. The quick brown fox jumps over the lazy dog.
Smaller text is harder to read —make sure you check the WCAG standards below.
Quick Presets
Advertisement
Key Features
Everything you need, right at your fingertips. Simple, fast, and built for everyone.
WCAG 2.1 Compliant
Checks against official AA and AAA accessibility standards.
Ratio Calculation
Precise contrast ratio calculation using the WCAG formula.
Color Pickers
Choose foreground and background colors with visual pickers.
Hex Input
Enter HEX color codes directly for precise color values.
How to Use This WCAG Contrast Checker
Getting started is easy. Just follow these simple steps.
Pick Colors
Enter or select foreground text and background colors.
View Ratio
See the exact contrast ratio calculated instantly.
Check Standards
See if it passes WCAG AA and AAA for normal and large text.
Adjust if Needed
Tweak colors until you meet accessibility requirements.
About This Color Contrast Checker
Color contrast is the difference in lightness and color between foreground text and its background. Sufficient contrast is essential for readability and accessibility, ensuring that text is readable by people with various visual abilities and in different viewing conditions.
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio requirements: a minimum of 4.5:1 for normal text (16px or smaller) and 3:1 for large text (18px or larger, or bold 14px+) for AA compliance. AAA compliance requires 7:1 for normal text and 4.5:1 for large text.
Good color contrast benefits everyone, not just people with visual impairments. It improves readability in bright sunlight or on low-quality displays, reduces eye strain during long reading sessions, and makes content more usable for older adults and people with temporary vision issues.
A color contrast checker lets you test text and background color combinations to see if they meet WCAG accessibility standards. It is an essential tool for web designers, developers, and anyone creating digital content who wants to ensure it is accessible to the widest possible audience.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard for making web content more accessible to people with disabilities. It defines contrast ratios for text to ensure readability for users with low vision or color blindness.
What's the difference between AA and AAA?
AA (minimum) requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. Most accessibility laws require AA compliance. AAA is recommended for better accessibility.
How is contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of each color. Relative luminance is measured using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. Luminance is computed from sRGB values using a specific formula defined in the WCAG specification.