Zadein Logo
Zadein
ToolsPricing
Add to Chrome

Contrast Checker

Validate color contrast accessibility against WCAG 2.1 standards.

Processed locally. Accessibility made easy.

Good Contrast?

This is how your text looks on the background. Ensure it is readable for everyone.

Preview
Contrast Ratio
21.00
Normal Text (AA)
PASS
Large Text (AA)
PASS
Normal Text (AAA)
PASS
Large Text (AAA)
PASS

About the Contrast Checker

The Zadein Contrast Checker measures the colour contrast ratio between a foreground and background colour. It checks compliance with WCAG accessibility guidelines, helping designers ensure their text is readable by people with visual impairments.

How to use

  1. 1Enter the foreground (text) colour and the background colour in HEX or RGB format.
  2. 2The tool calculates the contrast ratio automatically.
  3. 3Review whether the combination passes WCAG AA or AAA accessibility standards.

Common use cases

  • Verify that body text on a webpage meets accessibility contrast requirements.
  • Test button label colours against button background colours before deploying.
  • Evaluate colour combinations in a UI design for readability.
  • Check compliance with accessibility standards for a client project.

Frequently asked questions

What is the WCAG contrast ratio requirement?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 and 4.5:1 respectively.

What formats can I use to enter colours?

You can enter colours in HEX format (e.g. #ffffff) or as RGB values.

Does this tool help with full accessibility compliance?

Contrast is one aspect of accessibility. The tool focuses on colour contrast ratios specifically and does not evaluate other accessibility factors such as font size or keyboard navigation.