Color contrast checker
Check if your color combinations meet WCAG accessibility guidelines. Enter your foreground and background colors to instantly assess contrast ratios for text legibility across various sizes and contexts. Ensure your design is inclusive and compliant with web accessibility standards.
Very good
Design is not just what it looks like and feels like. Design is how it works.
– Steve Jobs, co-founder of Apple, Inc.
Learn more
Guide to color contrast
You can trust our contract color checker or you can read this guide to learn more about accessibility standards.
On this page
What is color contrast and why should you care?
Color contrast is the difference in light between two colors. In web and graphic design, it typically describes the relationship between text color and its background color.
High contrast makes the text easy to read, while low contrast can make it difficult or impossible for some users to discern the content.
How to measure color contrast
Color contrast is typically measured using a contrast ratio, ranging from 1:1 (no contrast, same color) to 21:1 (highest contrast, black text on white background or vice-versa). The color contrast ratio represents the difference in luminance or brightness between two colors.
The contrast ratio is calculated using the following formula:
(L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.
WCAG contrast guidelines
We recommend adhering to the WCAG (Web Content Accessibility Guidelines) color contrast guidelines for web and graphic design.
WCAG 2.0 brought the use of the minimum contrast requirements (AA level), which became even more stringent with WCAG 2.1 in 2018. The subsequent WCAG 2.2 and the upcoming WCAG 3.0 don’t bring anything new in the context of color contrast.
| WCAG 2.0 | WCAG 2.1 | |
|---|---|---|
| Small text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Non-text content | / | 3:1 |
Whenever possible, you should adhere to the WCAG 2.1 guidelines, with WCAG 2.0 guidelines being the mere minimum.
In our contrast checker tool above, you will see a green color when you meet WCAG 2.1 guidelines and a yellow color for WCAG 2.0, while you’ll get flagged with red if your color contrast meets neither.
Small text
Small text is defined as any text below 18 points or 14 points (pt) if bold. Since the conversion ratio is 1pt = 1.333px, this would be equivalent to 24px and 18.5px respectively.
According to WCAG 2.0 guidelines, small text requires a minimum contrast ratio of 4.5:1 to ensure readability for users with moderate visual impairments. This stringent requirement acknowledges that smaller text is more difficult to read, especially for individuals with low vision or color vision deficiencies. WCAG 2.1 guidelines suggest a minimum of 7:1 color contrast ratio for small text.
In the image below, you can check how white (#FFFFFF) text performs on various shades of grey, and how various shades of grey text perform on black background. (Feel free to experiment with more options with our color contrast checker above).
More often than not, we work with colors, especially for backgrounds. Here, working just off your intuition can be challenging because were are not good at perceiving the lightness of colors.
For example, you may think that using a complementary color palette (you can check what that would look like in our color palette generator) would ensure the highest contrast ratio, but it doesn’t. In fact, for most colors, it won’t pass the guidelines.
My favorites are using different shades of the same hue for all design elements. For example, I’d use light blue for the background and dark blue for the text (much like you can see on Photutorial). Or vice-versa.
Here are a few examples of what works and what doesn’t.
Large text
Large text refers to text that is 18 points or larger, or 14 points if bold (remember, that’s 19px or 24px if bold and more).
For large text, the minimum contrast ratio required by WCAG 2.0 is 3:1 and 4.5 by 2.1 version. This relaxed ratio reflects the fact that larger text is inherently easier to read, even with lower contrast, because of the increased size and stroke width.
Non-text content
Non-text content includes images, graphs, charts, and other visual elements that convey information without using text. WCAG 2.1 requires a contrast ratio of at least 3:1 for the essential parts of these visuals.
Key elements within images, such as lines in a graph or areas in a chart, should meet the contrast requirements to be easily distinguishable. Decorative elements that do not convey critical information do not need to adhere to these criteria.
You should always provide descriptive alternative text for non-text content. This ensures accessibility for users who rely on screen readers and other assistive technologies, making the visual information comprehensible to all users.