Colour Contrast Checker (WCAG AA/AAA)

Check colour contrast ratios for WCAG accessibility compliance. Test AA and AAA levels for normal and large text.

The quick brown fox jumps over the lazy dog

This is normal text. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).

Small text example: The five boxing wizards jump quickly.

Contrast Ratio
0.00:1

WCAG Compliance Results

Level AA

Normal Text(requires 4.5:1)
FailNeeds 4.5:1, you have 0.00:1
Large Text (18pt+ or 14pt bold)(requires 3:1)
FailNeeds 3:1, you have 0.00:1

Level AAA

Normal Text(requires 7:1)
FailNeeds 7:1, you have 0.00:1
Large Text (18pt+ or 14pt bold)(requires 4.5:1)
FailNeeds 4.5:1, you have 0.00:1

Common Colour Pairs

Tip: WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with visual impairments. Level AA is the standard requirement, while Level AAA provides enhanced accessibility.

Why Use a Colour Contrast Checker?

Colour contrast is essential for web accessibility. People with visual impairments, colour blindness, or those viewing content in challenging lighting conditions rely on sufficient contrast to read text comfortably.

Understanding WCAG Levels

  • Level AA (Minimum): Requires 4.5:1 for normal text and 3:1 for large text. This is the standard legal requirement in many jurisdictions.
  • Level AAA (Enhanced): Requires 7:1 for normal text and 4.5:1 for large text. Provides the best readability for users with low vision.
  • Large Text: Defined as 18pt (24px) regular weight or 14pt (18.5px) bold weight.

How Contrast Ratio is Calculated

The contrast ratio is calculated using the relative luminance of each colour. The formula considers how the human eye perceives different wavelengths of light, giving more weight to green (which we perceive as brighter) and less to blue.

Best Practices

  • Always test your colour combinations before finalising designs
  • Consider how colours will appear to users with colour blindness
  • Aim for Level AA compliance at minimum for all public-facing content
  • Use this tool during the design phase to avoid costly fixes later

Pro tip: Many countries have legal requirements for web accessibility. Ensuring proper colour contrast helps you comply with regulations like the ADA (US), EN 301 549 (EU), and the Equality Act (UK).

Related Tools

Color PickerImage to Base64QR Code Generator