Free tools, Images and design

Contrast checker

Enter a text color and a background color to see if they are readable, with a suggested fix when they aren’t.

Large heading text

Normal body text looks like this. Is it easy to read?

Button border

AAAAA
Normal text
Large text
Icons and borders

Guides

Questions

What contrast ratio do I need?

WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) and for icons and input borders. Level AAA asks for 7:1 and 4.5:1.

Why does contrast matter?

Low-contrast text is hard to read for people with low vision, for older users and for everyone on a phone in sunlight. Many countries also require accessible contrast for public and commercial websites.

How does the suggestion work?

When a pair fails, the checker keeps the hue of your text color and makes it darker or lighter until it passes AA, so the result stays close to your design.

More images and design tools

All 55 free tools