- Law 2.
Ensure good contrast between text and background.
When you're creating documents that are meant to be read,
you want to make sure that the text is legible.
And all that means, legible text is clear and easy to read.
So a really important aspect of text legibility,
is the amount of contrast between the text and background.
And so what exactly does contrast mean?
Contrast is simply the difference between two colors.
And colors can be different in a lot of different ways.
We're going to focus on differences
in lightness and darkness.
Because these differences have
the biggest effect on text legibility.
Here's an example of high contrast
between text and background.
And here we've got black text on a white background.
Black and white provide the highest possible contrast.
And that's because white is the lightest color,
and black is the darkest color.
So this high contrast makes it really easy to see
the difference between the text and background.
And that helps make this text easy to read.
So here's an opposite example.
Here's an example of low contrast
between text and background.
Here we're using two different shades of grey,
but the shades are really similar.
And this similarity makes it really difficult to see
the difference between the text and background.
There's low contrast here.
The low contrast makes the text very difficult to read
and this can cause eye strain and fatigue.
If you're using color on your designs,
the guidelines are basically the same.
Colors themselves don't affect text legibility.
But what's important is the contrast between
the colors or the difference between the lightness
and the darkness of each color.
Here's an example of high color contrast
between the text and background. And here we've got
dark blue text, on a light yellow background.
And here's an example of low color contrast
between text and background.
And just like in our grey scale example, this low contrast
is going to make this text pretty difficult to read.
While the high contrast example would be just fine.
If you're designing with light text on a dark background,
this is called Reverse Type.
And when there's a dark visually-heavy background,
a lot of times small thin strokes can get lost.
And this is going to make your text harder to read.
So Reverse Type is fine for small chunks of text.
You could use it for things like pull quotes and short
headlines when you're trying to call attention to something.
But you should really avoid Reverse Type
for large amounts of text.
And when you're using Reverse Type it's best to stick
with typefaces that don't contain really thin strokes.
So for this reason, Sans Serif typefaces
tend to work pretty well.
Sans Serif typefaces lack Serifs.
Serifs are often really small and sometimes very thin and
they can get easily swallowed up by your dark background.
Adding some letter spacing can also help with
legibility when you're working with Reverse Type.
And this extra spacing helps keep the dark
background from swallowing up the lighter text.
And if you look in this example you can see
that there's some extra horizontal space
between each of these characters.
And that's Letterspacing.
Some software programs also call this "tracking."
So far, we've looked at a bunch of examples
but they've all been solid text on solid backgrounds.
Legibility can become even more problematic
when you're dealing with pattern backgrounds
or photographic backgrounds.
It can be challenging to find the text color
that provides high contrast with all the different
parts of a complex background.
You really want to avoid these complicated backgrounds,
unless you're going to make sure that you provide
the necessary contrast and make the text legible.
So here's some text that we've overlaid on photograph.
And this text is pretty difficult to read,
even though it's just a small chunk.
And that difficulty is because there's a lack of contrast
between the text and all the different colors that appear
in this complicated photographic background.
So now, we've added a dark rectangle behind the text.
And you can see that that's helped providing plenty
of contrast between the text and all the different colors
that are found in the background.
And that's really helping this text stand out,
and make that text much more legible.
Remember that if you're creating a presentation
that you're going to be projecting onto a wall,
the color of that wall will also affect your presentation.
And depending on what type of wall you're projecting on,
that wall can become a complicated background.
So you want to avoid projecting on to walls
that have a lot of patters, textures, wallpaper.
You want to try to project onto light colored solid
walls where there're no patters and no textures.
Let's summarize.
You want to make your documents as legible as possible.
And one way you can assure this is true, is by making sure
that there's high contrast between text and its background.
If you're creating text-heavy documents, dark text
on a solid light background is easiest to read.
That's Law 2.
Ensure good contrast between text and background.