Colour and contrast: making text easy to read

Pretty colours that can’t be read are just decoration. Contrast, the difference in brightness between text and background, is what makes words readable.

Design · 5 min read

The 4.5:1 rule

Accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. A title is large text, but thumbnails get shrunk, so aim for 4.5:1 or higher. The Colour tab in the editor shows the current ratio and a plain label (Excellent, Good, OK for large text, Low).

Safe combinations

These pairings have strong contrast and look good:

  • Dark navy on ivory (#062443 on #FFFDF7): calm and editorial.
  • Ivory on deep navy: the same, inverted, for evening and cinematic looks.
  • Black on bright yellow: loud, the classic thumbnail pairing.
  • White on deep teal (a dark one, such as #1B5E62) for a modern, fresh feel.

Avoid these

Red on green (hard for people with colour-blindness), light grey on white, and any pairing where both colours have similar brightness, even if they look very different in hue.

Text over photos

A busy photo makes any colour unreliable. Add the readability overlay (Background tab) until the text is easy to read, or move the text to a quiet part of the photo. White text with a dark overlay is the most dependable approach.

Use an accent sparingly

Pick one accent colour for a single word, a rule or a corner mark. If everything is highlighted, nothing is.

Questions, ideas or a design you’d like to see?

Write to us and we’ll reply by email. You can also write directly to hello@itistitle.com.