Let's Chat
InsightsTools

Colour Contrast Checker

Check if your text and background colours meet WCAG 2.1 accessibility standards. Free, instant, no signup required.

Contrast Ratio --

Large text preview (18pt+)

Normal text preview. This is how your body text will look with this colour combination. Make sure it's easy to read at this size.

AA Normal Text 4.5:1 --
AA Large Text 3:1 --
AAA Normal Text 7:1 --
AAA Large Text 4.5:1 --

How to Use This Tool

Enter your text colour and background colour using hex codes (e.g. #1a1a2e) or use the colour pickers. The tool instantly calculates the contrast ratio and checks compliance against WCAG 2.1 Level AA and AAA standards.

If your colours fail the minimum contrast requirement, the tool suggests the nearest accessible alternative that maintains your colour's hue while meeting the 4.5:1 ratio for AA compliance.

Why Colour Contrast Matters for Your Website

Poor colour contrast is one of the most common accessibility issues on the web. When text doesn't have enough contrast against its background, it becomes difficult or impossible to read for people with low vision, colour blindness, or anyone viewing a screen in bright sunlight.

Beyond accessibility, contrast directly impacts your business. Visitors who can't read your content leave faster, reducing conversions and increasing bounce rates. Search engines also factor accessibility into rankings — a well-contrasted, accessible site performs better in search results.

Related Tools

Colour Converter Convert between hex, RGB, and HSL formats Brand Colour Extractor Upload your logo and extract brand colours with hex codes

Frequently asked questions

What is a good contrast ratio for web accessibility?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most websites should aim for at least AA compliance.

Why does colour contrast matter for websites?

Sufficient colour contrast ensures text is readable for all users, including those with low vision or colour blindness. Poor contrast leads to higher bounce rates, reduced engagement, and potential legal accessibility compliance issues. It also impacts SEO — search engines favour accessible websites.

What is WCAG?

WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility published by the W3C. It provides guidelines for making web content more accessible to people with disabilities, including requirements for colour contrast ratios between text and backgrounds.

How is contrast ratio calculated?

Contrast ratio is calculated using the relative luminance of two colours. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 is the darker colour's luminance. The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

Need an accessible website that converts?

We build websites with accessibility and performance baked in from the start. Get in touch to discuss your project.

Let's Chat