Test text and background color contrast against WCAG 2.1 AA and AAA standards. See pass/fail for normal and large text and fix accessibility issues fast.
Controls transparency - 0% is fully transparent, 100% is fully opaque
Solid (100%)
With Opacity (100%)
Complementary colors are opposite each other on the color wheel, creating high contrast and vibrant looks. Perfect for making elements stand out.
Click on the wheel to change hue
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.
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.
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.
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.
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.