WCAG Color Contrast Checker
Test your foreground and background colors to ensure your text is readable and complies with WCAG 2.1 accessibility standards.
Contrast Ratio
| Level | Normal Text | Large Text | UI Components |
|---|
Color Blindness Simulation
See how this combination appears to users with different types of color blindness.
(Red blind)
(Green blind)
(Blue blind)
(Grayscale)
What is WCAG and Why Does Color Contrast Matter?
The Web Content Accessibility Guidelines (WCAG) are a set of standards created by the World Wide Web Consortium (W3C) to ensure websites are accessible to people with disabilities. A critical component of these guidelines is color contrast—the difference in luminance between foreground text and its background.
Color contrast matters because millions of internet users have visual impairments, including low vision, color blindness (color vision deficiency), or age-related vision loss. If text doesn't contrast enough with its background, these users may find it difficult or impossible to read your content. Ensuring high contrast also benefits all users, especially those browsing in bright sunlight, on screens with glare, or on devices with low brightness settings.
Understanding Contrast Ratios and WCAG Levels
A contrast ratio is a numerical value that measures the difference in light between two colors. It ranges from 1:1 (no contrast, e.g., white text on a white background) to 21:1 (maximum contrast, e.g., black text on a white background).
WCAG 2.1 defines two main levels of conformance for color contrast:
- Level AA: Requires a minimum contrast ratio of 4.5:1 for normal text and 3.0:1 for large text (18pt regular or 14pt bold). It also requires a 3.0:1 ratio for UI components and graphical objects.
- Level AAA: The strictest standard, requiring a contrast ratio of 7.0:1 for normal text and 4.5:1 for large text.
Are You Legally Required to Be Compliant?
In many regions, website accessibility is a legal requirement. In the United States, the Americans with Disabilities Act (ADA) Title III has been widely interpreted to apply to public-facing websites. Courts generally refer to WCAG 2.1 Level AA as the baseline for compliance. Additionally, Section 508 of the Rehabilitation Act requires federal agencies and their contractors to maintain accessible digital assets. Similar laws exist globally, such as the European Accessibility Act and the Accessibility for Ontarians with Disabilities Act (AODA) in Canada.
How to Fix Contrast Issues
If our free WCAG color contrast checker indicates your colors fail the test, you can easily fix the issue by:
- Adjusting Lightness: Keep your brand hue but darken your text color (if it's on a light background) or lighten it (if it's on a dark background).
- Using Our Suggestion Tool: Simply click the "Suggest Better Colors" button on our tool, and it will automatically calculate the nearest color shade that passes WCAG AA requirements.
- Adding Backgrounds: If text is placed over a busy image, add a solid background color or a semi-transparent dark overlay behind the text to improve readability.
Frequently Asked Questions
What is a good color contrast ratio for WCAG compliance?
For WCAG 2.1 Level AA compliance, regular text must have a contrast ratio of at least 4.5:1, and large text (18pt or 14pt bold) requires at least 3:1. For the stricter Level AAA, regular text needs 7:1 and large text needs 4.5:1.
Why is color contrast important for accessibility?
Adequate color contrast ensures that people with low vision, color blindness, or age-related vision loss can easily read text and interact with user interface components on your website. It also benefits users in low-light environments.
What does UI Components mean in WCAG?
User Interface (UI) components refer to visual elements required to identify active controls (like buttons, input fields, borders, and focus indicators). WCAG 2.1 requires a contrast ratio of at least 3:1 against adjacent colors for these components.
Is WCAG compliance a legal requirement?
In many jurisdictions, yes. Under the Americans with Disabilities Act (ADA) in the US, Section 508, and the European Accessibility Act, public-facing websites must be accessible. WCAG 2.1 Level AA is generally the standard used.
How do I fix failing color contrast?
If a color combination fails, you need to darken the darker color or lighten the lighter color. You can use our tool's 'Suggest Better Colors' button to automatically find a slightly adjusted hue that meets the 4.5:1 ratio.