Contrast Checker

Check WCAG AA/AAA contrast ratios between two colors. Ensure your text is accessible.

Foreground (text)

Background

Sample Heading Text

This is sample body text at normal size. Readable content helps users focus on what matters.

Large text (18px bold)

Contrast ratio

17.06:1

✓

Pass

WCAG AA - Normal text ≥4.5:1

✓

Pass

WCAG AA - Large text ≥3:1

✓

Pass

WCAG AAA - Normal text ≥7:1

✓

Pass

WCAG AAA - Large text ≥4.5:1

About this tool

Check the colour contrast ratio between any foreground and background colour against WCAG 2.1 accessibility standards. The tool shows your contrast ratio and whether it passes AA and AAA thresholds for normal text, large text, and UI components. Passing WCAG contrast requirements is legally required in many jurisdictions and essential for users with low vision.

How to Check Colour Contrast for Accessibility

1Enter the foreground colour (text colour) as a HEX, RGB, or HSL value.
2Enter the background colour in the same way.
3The contrast ratio and WCAG pass/fail status appear instantly.
4If you fail AA, try darkening the text or lightening the background until you pass.
5Test both light and dark mode colour combinations if your site supports themes.

Frequently Asked Questions

What contrast ratio do I need for WCAG AA compliance?+

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). UI components and graphical objects need at least 3:1.

What is WCAG AAA?+

WCAG AAA is the highest accessibility conformance level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is difficult to achieve for all content but is worth targeting for body text.

How do I calculate contrast ratio?+

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance is calculated from the RGB values using a gamma correction formula.

Does dark mode need to pass contrast checks?+

Yes. If your website has a dark mode, both the light and dark colour schemes need to pass WCAG contrast requirements independently.

Looking for a deeper guide on this topic? Browse the Searchlight blog.

Visit the blog →

Related tools

View all Color Tools →

About this tool

How to Check Colour Contrast for Accessibility

1Enter the foreground colour (text colour) as a HEX, RGB, or HSL value.

2Enter the background colour in the same way.

3The contrast ratio and WCAG pass/fail status appear instantly.

4If you fail AA, try darkening the text or lightening the background until you pass.

5Test both light and dark mode colour combinations if your site supports themes.

Frequently Asked Questions

What contrast ratio do I need for WCAG AA compliance?+

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). UI components and graphical objects need at least 3:1.

What is WCAG AAA?+

WCAG AAA is the highest accessibility conformance level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is difficult to achieve for all content but is worth targeting for body text.

How do I calculate contrast ratio?+

Does dark mode need to pass contrast checks?+

Yes. If your website has a dark mode, both the light and dark colour schemes need to pass WCAG contrast requirements independently.