Contrast and Readability

Lesson 7 · taught by Pip

Here is the plain idea: contrast is the difference between two things — most importantly, between your text and the background behind it. If that difference is too small, the words get hard or impossible to read, and a beautiful design that can't be read has failed at its only job.

Think of writing in pencil versus a thick black marker on white paper. The marker is easy because it stands far apart from the page. Faint pencil makes you squint. Your readers shouldn't have to squint — ever. 🔦

Low contrast is the silent killer

The most common readability mistake is putting text in a color too close to its background: light gray text on a white page, dark blue text on a black page, pale yellow on cream. On the designer's bright screen it might look stylish and subtle. For an older reader, or someone on a dim phone in sunlight, it can be nearly invisible.

The fix is to make text and background clearly far apart in lightness. Dark text on a light background, or light text on a dark background — strong, unmistakable separation. "Subtle and elegant" is a trap when it comes to words people actually need to read.

There's a real measurement behind this. Designers talk about a contrast ratio between text and background, and accessibility guidelines set a minimum (a common bar is a ratio of at least 4.5 to 1 for normal text). You don't have to do the math by hand — free "contrast checker" tools let you paste in two colors and tell you instantly whether the pair passes.

Readability is more than color

Color contrast is the big one, but two other things make or break reading comfort.

Size. Text that's too small forces squinting and gets skipped. Body text should be comfortably large — roughly the size you'd expect in a well-set book or a clean website, not the tiny print of a legal footnote. When in doubt, go a little bigger; almost no one complains that text is too easy to read.

Line length. A line of text that runs too wide makes the eye lose its place jumping back to the start. A line too narrow chops thoughts into stubs. The comfortable range is roughly 50 to 75 characters per line — about a normal book column. Wide pages read better split into columns or kept to a sensible text width.

Design for everyone, not just yourself

Here's the mindset that ties it together: you are not your only reader. Your eyes are used to your screen at your brightness in your good lighting. Other people have different eyes, screens, and conditions, and some have low vision or color blindness.

A keeper builds the light bright enough for the ship furthest out in the worst fog, not just the one tied up at the dock. Designing for the reader who's straining means everyone else gets an easy time too. High contrast, comfortable size, sensible line length — none of it costs beauty, and all of it costs nothing to get right.

Your turn

Run a readability check on something you've made or a page you use.

• Squint at the text, or turn your screen brightness down. Does it stay readable, or fade out? Fading means too little contrast.
• Find any text that's truly small and ask whether it could be larger.
• For a really wide block of text, imagine narrowing it to about a book-column width. Easier to follow?

Readability isn't a finishing touch — it's the floor everything else stands on. Next, we'll pull all four tools together and build your flyer. 🐙