Colour Contrast Checker

Report an Issue

Help us improve by telling us what went wrong.

Embed this Tool

Customize and copy the embed code for your website.

Make Sure Everyone Can Read Your Text

A beautiful website means nothing if visitors cannot read the text. The Colour Contrast Checker evaluates the contrast ratio between your text colour and background colour, then tells you whether the combination meets accessibility standards. It is one of the simplest yet most impactful tools for building websites that work for everyone - including the estimated 300 million people worldwide with colour vision deficiency.

Understanding Contrast Ratios

Contrast ratio is a number between 1:1 (no contrast - same colour on same colour) and 21:1 (maximum contrast - black on white). The Web Content Accessibility Guidelines (WCAG) define two conformance levels:

AA (minimum): Normal text requires at least 4.5:1. Large text (18px bold or 24px regular) requires 3:1. This is the standard that most websites and apps aim for.

AAA (enhanced): Normal text requires at least 7:1. Large text requires 4.5:1. This is the gold standard, recommended for body text on content-heavy sites.

The colour contrast checker calculates this ratio instantly and clearly shows whether your combination passes or fails each level.

How to Use the Tool

Enter your foreground (text) colour and background colour using hex codes, RGB values, or a colour picker. The tool displays a live preview of how the text looks against the background, calculates the contrast ratio, and shows pass/fail status for WCAG AA and AAA at both normal and large text sizes.

If the combination fails, adjust either colour until it passes. Many designers find it helpful to darken the text or lighten the background incrementally until the ratio crosses the threshold. The live preview lets you see the visual impact of each adjustment.

Why Contrast Matters Beyond Accessibility

Accessibility is the primary reason, but good contrast benefits all users. Low-contrast text is harder to read in bright sunlight on a phone screen. It strains the eyes during extended reading sessions. It frustrates users in a hurry. Even users with perfect vision prefer text they can read without effort.

Poor contrast also affects business metrics. If visitors cannot comfortably read your content, they leave. If they cannot find the call-to-action button because it blends into the background, they do not convert. Contrast is a usability issue with direct commercial impact.

Common Contrast Mistakes

Light grey text on white backgrounds is the most frequent offender. A colour like #999999 on #FFFFFF has a contrast ratio of only 2.85:1 - well below the 4.5:1 minimum. It might look "clean" and "minimal" in a design mockup, but it fails accessibility and annoys real users.

Coloured text on coloured backgrounds often has lower contrast than expected. Blue text on a dark blue background or orange text on red can look distinct in a design tool but fall below the required ratio.

Text on images or gradients is tricky because the contrast varies across the background. Check the contrast against the lightest and darkest areas of the background to ensure readability everywhere.

Legal and Professional Considerations

In many jurisdictions, web accessibility is a legal requirement. The Americans with Disabilities Act (ADA), the European Accessibility Act, and similar legislation in other countries reference WCAG guidelines. Failing to meet contrast standards can expose organisations to legal action. Using the Colour Contrast Checker during the design process prevents these issues before launch.

Quick, Visual, and Private

The tool runs entirely in your browser. Enter two colours, see the ratio, check the result - the whole process takes seconds. No data is stored or transmitted. Build more readable, more accessible, and more inclusive designs with every colour choice you make.