Free Colour Contrast Checker for Accessibility

Most websites fail basic accessibility standards without anyone realizing it. Poor colour contrast makes text difficult or impossible to read for people with low vision, colour blindness, or poor screen conditions. It also signals to search engines and regulators that your site is not built for everyone.

Enter your text and background colours below to see your contrast ratio and whether your design meets WCAG 2.1 standards.

Colour Contrast Checker

Check if your text and background colours meet WCAG accessibility standards.

Foreground (Text)

Lightness 0%

Background

Lightness 100%

Contrast Ratio

21:1

Required: 4.5:1 (AA) · 7:1 (AAA)

Live Preview

Large Text (18pt / 14pt bold)

Normal body text. The quick brown fox jumps over the lazy dog. This is how your content will appear on this background.

Button / UI Component

WCAG 2.1 Compliance

Colour Blindness Simulation

How this combination appears to users with common colour vision deficiencies. Approximately 8% of men and 0.5% of women are affected.

What This Means

Get a Free Audit →

What your results actually mean for your business

A failing contrast ratio is not just a design issue. In Canada, the Accessible Canada Act sets expectations for digital accessibility, and WCAG 2.1 AA compliance is increasingly the benchmark for websites serving the public. Beyond legal risk, poor contrast directly affects how many people can read and use your site.

If your results showed any failures, the fix is rarely a full redesign. Often it is a small adjustment to your colour palette, a tweak to font weight, or a simple change to how colour is used on buttons and links.

Not sure where to start? SUPERUS offers a free accessibility audit that reviews your entire site: contrast, font sizing, keyboard navigation, screen reader compatibility, and more. We will tell you exactly what needs fixing and how to do it.