Check color contrast for accessibility
Contrast is the measurable difference in brightness between text and the surface behind it. If that difference is too small, people with low vision, color vision deficiency, or anyone reading on a glary screen will struggle to make out the words. A color contrast checker calculates the exact ratio between two colors so you can prove a combination is readable rather than guessing.
Choose a color and the tool previews it against light and dark text, showing the contrast ratio for each pairing and whether it passes the Web Content Accessibility Guidelines (WCAG). You can immediately see which of your palette colors are safe to use as text and which should stay decorative.
How contrast ratio is measured
Contrast ratio is expressed as a number from 1:1 (identical colors, invisible) up to 21:1 (pure black on pure white). It is derived from the relative luminance of each color — a weighted measure of how light each one appears to the human eye — not simply from how different the HEX codes look. Two colors can have similar-looking values yet very different luminance, which is why a calculated ratio matters.
WCAG thresholds you need to hit
- AA, normal text — at least 4.5:1. This is the baseline most websites are legally and practically expected to meet.
- AA, large text — at least 3:1 for text 18pt (24px) and up, or 14pt (18.66px) bold and up.
- AAA, normal text — at least 7:1, an enhanced level for situations demanding maximum readability.
- AAA, large text — at least 4.5:1.
The checker labels each combination as suitable for all text sizes, large text only, or not recommended, so you do not have to memorize the cutoffs.
Fixing a failing combination
When a pairing falls short, you rarely need to abandon the color. Darkening the text (or lightening the background) raises luminance contrast quickly. Increasing saturation alone usually does little — it is the lightness difference that moves the ratio. For body copy, aim comfortably past 4.5:1 rather than sitting right on the line, since anti-aliasing and thin fonts eat into perceived contrast.
Remember that contrast requirements apply to meaningful text and interface components, not to disabled elements or purely decorative graphics. Logos are also exempt, though good contrast still helps recognition. It is also worth testing your colors against both light and dark backgrounds, since a pairing that passes on one theme can fail on the other, and many users now switch between the two depending on their device or the time of day.
Check color contrast for accessibility
Contrast is the measurable difference in brightness between text and the surface behind it. If that difference is too small, people with low vision, color vision deficiency, or anyone reading on a glary screen will struggle to make out the words. A color contrast checker calculates the exact ratio between two colors so you can prove a combination is readable rather than guessing.
Choose a color and the tool previews it against light and dark text, showing the contrast ratio for each pairing and whether it passes the Web Content Accessibility Guidelines (WCAG). You can immediately see which of your palette colors are safe to use as text and which should stay decorative.
How contrast ratio is measured
Contrast ratio is expressed as a number from 1:1 (identical colors, invisible) up to 21:1 (pure black on pure white). It is derived from the relative luminance of each color — a weighted measure of how light each one appears to the human eye — not simply from how different the HEX codes look. Two colors can have similar-looking values yet very different luminance, which is why a calculated ratio matters.
WCAG thresholds you need to hit
- AA, normal text — at least 4.5:1. This is the baseline most websites are legally and practically expected to meet.
- AA, large text — at least 3:1 for text 18pt (24px) and up, or 14pt (18.66px) bold and up.
- AAA, normal text — at least 7:1, an enhanced level for situations demanding maximum readability.
- AAA, large text — at least 4.5:1.
The checker labels each combination as suitable for all text sizes, large text only, or not recommended, so you do not have to memorize the cutoffs.
Fixing a failing combination
When a pairing falls short, you rarely need to abandon the color. Darkening the text (or lightening the background) raises luminance contrast quickly. Increasing saturation alone usually does little — it is the lightness difference that moves the ratio. For body copy, aim comfortably past 4.5:1 rather than sitting right on the line, since anti-aliasing and thin fonts eat into perceived contrast.
Remember that contrast requirements apply to meaningful text and interface components, not to disabled elements or purely decorative graphics. Logos are also exempt, though good contrast still helps recognition. It is also worth testing your colors against both light and dark backgrounds, since a pairing that passes on one theme can fail on the other, and many users now switch between the two depending on their device or the time of day.
You build the idea. I'll ship the product.
Productized MVP development for founders. 9 SaaS apps shipped — yours could be next, in 6 weeks. Secure by default.
Frequently Asked Questions
Common questions about the Color Contrast Checker
For normal body text, aim for at least 4.5:1 to meet WCAG AA, and 7:1 to meet the stricter AAA level. Large text (18pt regular or 14pt bold and above) can pass AA at 3:1. Higher ratios are better for readability.
AA is the standard most sites target and is widely referenced by accessibility laws; it requires 4.5:1 for normal text. AAA is an enhanced level requiring 7:1 for normal text, used when maximum legibility is a priority. AAA is not expected for all content.
It compares the relative luminance of the two colors. Each color is converted to a luminance value weighted for how the eye perceives red, green, and blue, then the lighter and darker values are combined into a ratio from 1:1 to 21:1.
Adjust lightness rather than saturation: make the text darker or the background lighter until the ratio clears the threshold. Increasing saturation alone usually has little effect on contrast because the ratio depends mainly on luminance difference.
It applies to text and to meaningful user-interface components and graphics needed to understand the content. Purely decorative images, disabled controls, and logos are exempt, although good contrast still improves usability.
ℹ️ Disclaimer
This tool is provided for informational and educational purposes only. All processing happens entirely in your browser - no data is sent to or stored on our servers. While we strive for accuracy, we make no warranties about the completeness or reliability of results. Use at your own discretion.