Tea time: topic 1: Contrast

Geschreven door Laurent op 14 December 2022

We always start from the idea that if it works for a small group of people, it certainly works for the biggest one.

Each month we take a deep look at what a certain topic means for us, but also for the design/communication world.

This month it’s:

How do they affect designs/communication, how to make them for everybody. And how do I increase my impact!
Whether you want more sales or more connectivity from your audience.


Because great contrast =

+ Accessibility

+ Inclusivity

+ Sales


It’s a common problem that affects around
1 in 12 men and
1 in 200 women.

Color Blindness | MedlinePlus


Bigger problem:

It is estimated that
1 in 10 people have dyslexia.

But wait jos? What does this have to do with contrast?


Avoid very high contrast.
Be aware also that for some people, especially people with dyslexia, will make reading more difficult.


  • Use single colour backgrounds. Avoid background patterns or pictures and distracting surrounds.
  • Use sufficient contrast levels between background and text.
  • Use dark coloured text on a light (not white) background.
  • Avoid green and red/pink, as these colours are difficult for those who have colour vision deficiencies (colour blindness).
  • Consider alternatives to white backgrounds for paper, computer and visual aids such as whiteboards. White can appear too dazzling. Use cream or a soft pastel colour. Some dyslexic people will have their own colour preference.
  • When printing, use matt paper rather than gloss. Paper should be thick enough to prevent the other side showing through.

Olly Moss is a good example of a designer who plays around with contrast to narate and increase a visual story.


Luckily a bunch of great tools exist.

Such as

Colourblind : Adobe color accessibility


A great tool to test if your proposed colours are actually not a risk for users suffering from colourblindness.
It also corrects and redirects towards more favourable colours.


Contrast checker : Adobe contrast check


When the value reaches 4:5 and beyond it reaches the WCAG limit for approved contrast.

*What is the WCAG*

Web Content Accessibility Guidelines (WCAG) 2 is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

Multiple Levels of acceptance exist:

  • level AA
  • level AAA

But also Types:

  • Regular Text
  • Large Text
  • Graphic Components


  • Aim to reach at least a maximum of level AA for text.
  • Stay away from too high contrast for text (dyslexia)


In this order

  1. Contrast & colors
  2. Typography
  3. Illustration/photography
  4. AI
  5. Web (UI/UX)

Thanks for reading, see you around!