Color Contrast Checker

Check the contrast ratio of text and background colours against WCAG AA and AAA, and get the nearest colour that passes. Free accessibility tool.

Text colour

Background

Large heading text

Normal body text — the quick brown fox jumps over the lazy dog. বাংলা লেখাও পরিষ্কার পড়া যায় কি?

6.70 : 1

✓
AA normal text
needs 4.5:1
✓
AA large text (24px / 19px bold)
needs 3:1
✕
AAA normal text
needs 7:1
✓
AAA large text
needs 4.5:1
✓
UI parts & icons
needs 3:1

How to use Color Contrast Checker

Pick or type the text colour and the background colour.
Read the contrast ratio and the AA / AAA results.
If it fails, click “Use it” for the nearest colour that passes.

Good to know

Runs in your browser; nothing is uploaded.

Privacy

Runs entirely in your browser. Nothing you enter or open here is uploaded.

Questions

What ratio do I need?

WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 19 px bold). AAA asks for 7:1 and 4.5:1.

Related tools