Color Contrast Checker
Test any text and background color pair against WCAG accessibility standards and see if it passes. No signup. Ideal for accessible, readable web and app design.
| Standard | Normal text | Large text |
|---|---|---|
| WCAG AA | — | — |
| WCAG AAA | — | — |
AA needs 4.5:1 (normal) / 3:1 (large ≥18.66px bold or 24px). AAA needs 7:1 / 4.5:1.
This color contrast checker tests any text and background color pair against WCAG accessibility standards, telling you whether the combination is readable enough, directly in your browser. Enter the two colors and see the contrast ratio and pass or fail result. No account, no install, so designers and developers can ensure accessible, readable color choices on any device.
How to Check Color Contrast Step by Step
- Enter the text color. Provide the color of your text, usually as a hex code. This is the foreground color that must be readable against the background.
- Enter the background color. Provide the background color the text sits on. The contrast between these two colors determines how readable the text is.
- Read the contrast ratio. The tool calculates the contrast ratio between the two colors, a number that measures how much they differ in brightness, which is what makes text legible.
- Check the pass or fail result. The checker shows whether the pair passes the WCAG standards for normal and large text, telling you if the combination is accessible.
- Adjust if it fails. If the contrast is too low, darken or lighten one color and check again until the pair passes the standard for your text size.
What Color Contrast Is and Why It Matters
Color contrast is the difference in brightness between text and its background, and it is fundamental to readability. Text that is too similar in brightness to its background is hard to read for everyone and impossible for some. Good contrast ensures that letters stand out clearly, which matters enormously for people with low vision, color vision deficiencies, or those using screens in bright sunlight. Contrast is one of the most important factors in accessible design.
The Web Content Accessibility Guidelines, known as WCAG, set the international standards for accessible web content, including specific requirements for color contrast. WCAG expresses contrast as a ratio between the brightness of two colors, ranging from one to one, meaning identical, to twenty one to one, meaning black on white. The guidelines specify minimum ratios that text must meet to be considered accessible, based on research into what people can actually read.
WCAG defines levels of conformance, with AA being the widely adopted standard and AAA a stricter one. For normal text, AA requires a contrast ratio of at least 4.5 to 1, while large text, being easier to read, needs only 3 to 1. AAA raises these to 7 to 1 and 4.5 to 1. These thresholds are not arbitrary; they come from studies of readability across a range of vision, and meeting them is often a legal requirement.
Accessibility is increasingly a legal obligation, not just good practice. Many countries require public and commercial websites to meet accessibility standards, with WCAG AA as the common benchmark. Beyond compliance, accessible contrast simply makes content usable by more people, which is good for everyone and good for business. Checking contrast during design, rather than discovering problems later, is the efficient way to build content that is readable by all.
The WCAG Standards Explained
| Text size | AA minimum | AAA minimum |
|---|---|---|
| Normal text | 4.5 to 1 | 7 to 1 |
| Large text | 3 to 1 | 4.5 to 1 |
| Ratio meaning | Higher is more readable | 1:1 is identical, 21:1 is black on white |
| Common target | AA is the usual standard | AAA is stricter, for higher accessibility |
Who Needs a Color Contrast Checker
Pro Tips for Accessible Color Choices
Common Color Contrast Mistakes to Avoid
Related Tools You May Need Next
To adjust colors while meeting contrast, our Color Converter translates between hex, RGB and HSL. When building color schemes, the CSS Gradient Generator and Random Hex Color Generator help, and you can check any generated color here.
Frequently Asked Questions
How do I check color contrast?
Enter your text color and your background color, usually as hex codes, and the tool calculates the contrast ratio between them and shows whether the pair passes the WCAG accessibility standards for normal and large text. If it fails, adjust the brightness of one color, making the text darker or the background lighter, and check again until the combination meets the required ratio for your text size.
What is a good contrast ratio?
Under the widely adopted WCAG AA standard, normal text needs a contrast ratio of at least 4.5 to 1, and large text needs at least 3 to 1. The stricter AAA standard requires 7 to 1 for normal text and 4.5 to 1 for large text. A higher ratio means more readable text, with 21 to 1 being pure black on white. Aim for at least AA as your minimum for accessible design.
What are the WCAG standards?
The Web Content Accessibility Guidelines, or WCAG, are the international standards for accessible web content, including specific requirements for color contrast. They express contrast as a ratio between the brightness of two colors and set minimum ratios that text must meet. WCAG defines conformance levels, with AA being the common benchmark and AAA stricter. These thresholds come from research into what people across a range of vision can actually read.
Why does color contrast matter for accessibility?
Because text that is too similar in brightness to its background is hard or impossible to read, especially for people with low vision, color vision deficiencies, or those using screens in bright light. Good contrast ensures letters stand out clearly, making content readable by the widest audience. It is one of the most important factors in accessible design and is often a legal requirement for websites.
What is the difference between AA and AAA?
AA and AAA are WCAG conformance levels. AA is the widely adopted standard, requiring 4.5 to 1 contrast for normal text and 3 to 1 for large text, and is the common legal benchmark. AAA is stricter, requiring 7 to 1 for normal text and 4.5 to 1 for large text, providing higher accessibility. Most sites target AA as their minimum, while AAA is pursued where the highest level of accessibility is needed.
Why does large text need less contrast?
Because larger text is inherently easier to read, its strokes being thicker and more visible, it can remain legible at a lower contrast ratio than small text. This is why WCAG sets a lower requirement for large text, 3 to 1 for AA rather than 4.5 to 1. It gives designers more flexibility for headings and large display text, though more contrast always improves readability for everyone.
Can two different colors still fail contrast?
Yes, absolutely. Contrast depends on the difference in brightness between two colors, not just whether they are different hues. Two colors can look distinctly different in color but have similar brightness, giving poor contrast that fails the standard and is hard to read. This is why you must check the actual contrast ratio rather than assuming that visibly different colors automatically provide enough contrast for readable text.
Is the color contrast checker free?
Yes, it is completely free with no account and no usage limit. You can check as many color pairs as you like against the WCAG standards, as often as you like, at no cost. It runs entirely in your browser on any device, so there is nothing to download or install, and the contrast ratio and pass or fail result appear instantly whenever you enter two colors.