Make text easy to read

Improve text and background colours so more people can read your content comfortably.

Why it matters

Text with too little contrast can disappear for people with low vision, colour-vision differences, or anyone using a screen in bright light.

How to fix it

1. 1

   Identify the text colour and the colour directly behind it.

2. 2

   Aim for at least 4.5:1 for normal text and 3:1 for large text.

3. 3

   Check links, buttons, placeholders, hover states, and text placed over images too.

Example

.intro {
  color: #8a9b93;
  background: #ffffff;
}

.intro {
  color: #46564f;
  background: #ffffff;
}

How to check your fix

Check your page again with ibin. The issue disappears from your report once every place is fixed. Then try it yourself the way a visitor would.

• Check the page again and make sure the issue no longer shows up in your report.
• Try the fixed part yourself: with a mouse, with only a keyboard, and zoomed in.
• If you can, ask someone who uses a screen reader to try it too.

Also available in Nederlands, Français, Deutsch