Check color contrast instantly.

Contrast: the difference between seen and read

A design can look beautiful and still be unreadable.
Soft gray on white. Pale pink on beige. It looks refined. For many people it is simply invisible.

Contrast is not a matter of taste. It can be measured.

✦ What the numbers mean

The contrast ratio compares the lightness of two colors. It runs from 1:1 (no difference) to 21:1 (black on white).

• 4.5:1 is the minimum for normal body text under WCAG level AA.
• 3:1 is enough for large text: roughly 24 pixels, or 19 pixels in bold.
• 3:1 is also the minimum for buttons, icons and input borders.
• 7:1 is the stricter AAA level for normal text.

✦ How to use this checker

1. Enter the text color and the background color.
2. Read the ratio and the pass or fail result.
3. If it fails, change the lightness first. Not the hue.
4. Test every combination you actually use. Links, buttons, captions, placeholder text.
5. Save the pairs that pass. Build your design from those.

✦ Why it matters more than you think

Low contrast is not only a problem for people with low vision.
It affects everyone who reads on a phone in sunlight. Everyone who is tired. Everyone older than forty.

Good contrast is not a restriction. It is hospitality.

✦ Brand colors that fail

Many brand colors are too light for text. Yellow, light green, soft orange.
That is fine. Use them for shapes, backgrounds and accents. Use a darker version for text.
A brand does not lose its identity because the body text is readable.

✦ Common mistakes

• Checking only the headings. Small text needs the most contrast.
• Text on photos without a darker layer behind it.
• Placeholder text in forms that is almost invisible.
• Relying on color alone. A red error message also needs an icon or a word.

✦ Try this

Take a screenshot of your design and turn it black and white. Blur your eyes a little.
What do you still see? That is your real hierarchy.

✦ In practice

A light gray caption. #999999 on white looks elegant. It scores about 2.8:1. It fails.
Move it to #767676 and it passes at 4.5:1. The difference is hardly visible. The difference in readability is large.

A white button on a bright orange. Orange feels strong, but it is quite light. White text on it often fails.
Two options. Make the orange darker. Or use dark text on the orange. Both keep the energy.

Text on a photo. One part of the image is dark, another is light. The text passes in one place and fails in another.
Add a dark layer behind the text, or place the text on a calm area of the photo. Then check the lightest spot under the letters.

✦ Four questions before you publish

1. What do you want to say? If it needs to be read, it needs contrast.
2. What must be seen first? That element gets the highest contrast on the page.
3. What can go? Decorative low-contrast text. If nobody can read it, remove it.
4. What is the next small step? Check the three smallest texts on your page today.

✦ A small checklist

• Body text reaches at least 4.5:1.
• Large headings reach at least 3:1.
• Buttons, icons and form borders reach at least 3:1.
• Links are recognizable by more than color alone.
• Hover and focus states are checked too, not only the default state.

✦ From the classroom

We teach contrast before we teach color. First light and dark. Then hue.
Students who learn it in that order make calmer, clearer work. And they rarely fail an accessibility check.