Lesson 4 : Readability as color distance

We introduce you to a key concept in digital design – Readability. Much of graphic design is about creating a visual clarity to give works and graphics elves of important while maintaining a level of visually legibility.


Move the colored balls around and notice the legibility of the text in different sizes. Of course the size of the text helps legibility, so does color difference. Also notice that creating color difference using different lightness values (L axis) creates a lot more legibility than creating color distance purely through movement in the ab plane. Try that, by creating high color difference by moving the balls in a horizontal plane, while keeping the L distance low.


distanceYou will notice that:

  • lightness difference is essential for readability
  • low total difference may still work with large text fonts but will not work with small text sizes
  • low lightness difference and high ab difference will create visual discomfort

Previous LessonNext Lesson