EN

Accessibility

Color Contrast Checker

Check foreground and background colors against WCAG AA and AAA contrast requirements.

Readable color preview

Use this preview to judge text, controls and interface surfaces before shipping your design.

Contrast ratio
17.74:1
AA Normal textPass
AA Large textPass
AAA Normal textPass
AAA Large textPass

How to use this tool

Test a text and background pair, preview normal and large text, then generate the nearest foreground color that passes WCAG AA.

  1. 1 Choose text and background colors.
  2. 2 Review AA and AAA results.
  3. 3 Use the suggested accessible color when a pair fails.

Frequently asked questions

What contrast ratio does WCAG AA require?

Normal text needs 4.5:1. Large text needs 3:1.

What contrast ratio does WCAG AAA require?

Normal text needs 7:1. Large text needs 4.5:1.