Cookie Consent by Free Privacy Policy Generator Colour Contrast Checker | WCAG Accessibility Tool | CL SEO

Colour Contrast Checker

Check if your colour combinations meet WCAG 2.1 accessibility standards. Test foreground and background colours to ensure your content is readable for users with visual impairments.

This tool evaluates contrast ratios against WCAG Level AA and AAA requirements for both normal and large text, helping you create accessible and inclusive web designs.

1

Select Colours

Choose your foreground (text) and background colours to check their contrast ratio.

Hex
Hex
Quick Presets:
2

Preview

Large Text Sample (24px Bold)
This is a sample of normal body text at 16px. Good contrast ensures that text is readable for users with visual impairments, including colour blindness and low vision.
Small text at 12px - harder to read with poor contrast
3

Contrast Ratio Results

12.63:1
Contrast Ratio
✓ AA Normal ✓ AA Large ✓ AAA Normal ✓ AAA Large
✓
AA Normal
Pass
✓
AA Large
Pass
✓
AAA Normal
Pass
✓
AAA Large
Pass
WCAG Level AA
Pass
Normal Text (min 4.5:1) ✓ Pass
Large Text (min 3:1) ✓ Pass
UI Components (min 3:1) ✓ Pass
WCAG Level AAA
Pass
Normal Text (min 7:1) ✓ Pass
Large Text (min 4.5:1) ✓ Pass
📘 What is Large Text?

Large text is defined as 18pt (24px) or larger, or 14pt (18.67px) bold or larger. Large text has lower contrast requirements because it's easier to read.

4

Colour Suggestions

If your current combination doesn't pass, try these alternatives that maintain your colour hue while meeting accessibility standards.

Suggested Foreground Colours (AA Compliant)
Suggested Background Colours (AA Compliant)
5

Export

Understanding WCAG Contrast Requirements

  • WCAG Level AA (Minimum): Normal text requires a contrast ratio of at least 4.5:1. Large text (18pt+ or 14pt+ bold) requires at least 3:1. This is the minimum standard for most websites.
  • WCAG Level AAA (Enhanced): Normal text requires a contrast ratio of at least 7:1. Large text requires at least 4.5:1. This provides the best accessibility but may limit design choices.
  • UI Components: User interface components and graphical objects require a minimum contrast ratio of 3:1 against adjacent colours.

Why Colour Contrast Matters for SEO

  • User Experience Signal: Poor accessibility can increase bounce rates and decrease time on page, negatively impacting SEO rankings.
  • Core Web Vitals: Accessibility is part of Google's page experience signals. Sites with better accessibility tend to perform better in search.
  • Legal Compliance: Many regions require websites to meet accessibility standards. Non-compliance can result in legal issues and reputational damage.
  • Broader Audience: Accessible websites can be used by more people, including the 1 in 12 men and 1 in 200 women who have colour vision deficiency.

Other development, productivity & SEO Tools

Development

Images

Styling

Tools

WordPress

Local SEO

Tools

Productivity

Reporting

SEO

Feeds

Schema

Technical

Tools