Color Contrast Checker (WCAG)

Check the contrast ratio between text and background colors against WCAG AA and AAA.

Large text sample
Normal body text looks like this sentence.
–Contrast ratio
–AA · normal text (4.5:1)
–AA · large text (3:1)
–AAA · normal text (7:1)
–AAA · large text (4.5:1)

About this tool

Accessible text needs enough contrast with its background. Enter two colors to see the ratio and whether it passes each WCAG level.

How to use Color Contrast Checker (WCAG)

  1. Choose the text color and the background color.
  2. Read the contrast ratio and the pass or fail results.
  3. Adjust the colors until they pass.

Frequently asked questions

What ratio do I need?

4.5:1 for normal text and 3:1 for large text to meet AA.

What counts as large text?

About 24px regular or 19px bold and above.