Web Accessibility Contrast Checker
Improve your website's usability by ensuring sufficient contrast between text and background colors according to official WCAG standards.
Poor. Only passes for large text.
Live Text Preview
This box demonstrates exactly how your text will look on the chosen background. Ensure your users can read this comfortably without straining their eyes.
WCAG AA Standard
WCAG AAA Standard
Why is color contrast important?
Web accessibility (often abbreviated as a11y) is the practice of ensuring that your website can be used by as many people as possible. A massive part of this is color contrast. If you use light grey text on a white background, users with low vision or color blindness will struggle to read your content.
Beyond disabilities, poor contrast affects everyone. Think about trying to read a poorly contrasted website on your phone while standing outside in the bright sun. By adhering to WCAG contrast guidelines, you immediately improve the User Experience (UX) and User Interface (UI) for every single visitor.
Understanding WCAG Ratios
The AA Standard (4.5:1)
This is the industry baseline. To pass WCAG Level AA, your normal text must have a contrast ratio of at least 4.5:1. If your text is "Large" (18pt regular or 14pt bold), the requirement drops to 3.0:1.
The AAA Standard (7.0:1)
This is the highest level of accessibility. To pass Level AAA, your normal text must hit a rigorous 7.0:1 ratio, while large text must hit 4.5:1. Most standard websites only aim for AA compliance.
Frequently Asked Questions
What is WCAG?+
WCAG stands for Web Content Accessibility Guidelines. It is a robust set of internationally recognized rules published by the World Wide Web Consortium (W3C) that outline exactly how to make web content more accessible to people with disabilities.
How is the Contrast Ratio calculated?+
The calculation evaluates the relative luminance (brightness) of the lighter color divided by the relative luminance of the darker color. The formula outputs a number ranging from 1:1 (no contrast, like white text on a white background) to 21:1 (maximum contrast, like black text on a white background).
Do UI components like buttons need to pass this test?+
Yes. Under WCAG 2.1, there is a requirement for "Non-text Contrast." This means the boundaries of user interface components (like the border of a text input or the background of a button) must have a contrast ratio of at least 3.0:1 against adjacent colors so that users know the element is interactive.