Colored Text
Designing Legible Text | Text and
Background Color
Designing Legible Text
Colored Text Against White and Black Backgrounds
- Colored text does not have the same legibility as black and white text.
- The table below shows a ranking of the legibility of colored text
(primary colors and their complementaries) depending on background.
- The dark versions of some colors demonstrate how the legibility
of these colors can be improved under certain conditions.
| Legibility |
Black Background |
White Background |
| Best |
White
|
Black
|
|
Yellow ,
Dark Yellow
|
Blue, Dark
Blue
|
|
Cyan ,
Dark Cyan
|
Red, Dark
Red
|
| Medium |
Green, Dark
Green
|
Magenta
|
|
Magenta
|
Green, Dark
Green
|
|
Red, Dark
Red
|
Cyan ,
Dark Cyan
|
| Poorest |
Blue, Dark
Blue
|
Yellow ,
Dark Yellow
|
| None |
Black
|
White
|
|
Bold Type
On a white background use bold type for better legibility, especially
if you use a color with poorer legibility (the white surround tends to spread
into the letters).
|
Bold Type
|
Plain Type
|
|
Black on White, Bold
|
Black on White, Plain
|
|
Dark Blue, Blue
on White, Bold
|
Dark Blue, Blue
on White, Plain
|
|
Dark Red, Red
on White, Bold
|
Dark Red, Red
on White, Plain
|
|
Dark Green, Green
on White, Bold
|
Dark Green, Green
on White, Plain
|
|
Lightness and Hue Differences
For readable text (or graphics) always provide a significant lightness difference
between the information and the background (the acuity of the eye is much higher
for lightness changes than for changes in hue and saturation).
|
Do
|
Do not
|
|
Black on White
|
Black on Dark Grey
|
|
Dark Grey on White
|
Middle Grey on Light Grey
|
|
Black on Light Grey
|
Dark Grey on Middle Grey
|
|
Discrimination on the basis of hue and/or saturation differences alone is
not adequate in any situation where there is fine detail.
| Do: Hue/Saturation and Lightness |
Do not: Hue/Saturation Only |
|
Blue on Cyan (Hue)
|
Blue on Cyan (Hue)
|
|
Blue on Blue (Saturation)
|
Blue on Blue (Saturation)
|
|
Guideline: Allow a contrast ratio of at least 5:1 between text and
background (ISO 9241 demands at least 3:1, but 10:1 is preferred).
|
Maximum Lightness Difference
|
Little Lightness Difference
|
|
Black on White, Bold
|
Blue on Green, Bold
|
|
Black on White, Plain
|
Blue on Green, Plain
|
|
White on Black, Bold
|
Green on Magenta, Bold
|
|
White on Black, Plain
|
Green on Magenta, Plain
|
|
In the case of little lightness difference, the color values have been manually
adjusted to be similar. However, depending on the display, the difference may
be more or less apparent.
Inappropriate Text Colors
- Beware of blue: Blue is inappropriate for discerning small shapes like
alphanumeric characters, dots etc. on a dark background. However, blue is
a good background color.
- Light greens are as well inappropriate as text colors on light backgrounds.
|
Blue
|
Blue
|
Red
|
Red
|
Green
|
Green
|
|
Blue
|
Blue
|
Red
|
Red
|
Green
|
Green
|
|
Text and Background Color
Blue Text on Red Background and Vice Versa
Do not use blue text on a red background or vice versa - the
colors are seen at different depths.
Put Colored Text on Neutral Background
For maximum legibility, avoid colored text with colored background
(the hue changes through color contrast or hue induction.)
-> Place colored text on a neutral background (white, black, or grey) or
use black or white text on a colored background.
| Do |
Do not |
|
Blue on Grey
|
Blue on Green
|
|
Black on Yellow
|
Black on Blue
|
|
White on Blue
|
White on Yellow
|
|
Rules for Choosing Black and White Text
- Background lightness between 0% and 20%: Use white text
- Background lightness between 40% and 100%: Use black text
| Background Lightness |
White Text |
Black Text |
|
20%
|
White
|
Black
|
|
50%
|
White
|
Black
|
|
80%
|
White
|
Black
|
|
Improving Color Consistency
Color consistency can be improved (if color is necessary, e.g. for
a corporate color scheme) by using backgrounds which are desaturated and either
of a closely similar hue to the text or, for increased contrast, of a complementary
hue.
| Similar Hue |
Complementary Hue |
|
Blue on Light Blue
|
Blue on Light Yellow
|
|
Red on Light Red
|
Red on Light Cyan
|
|
Green on Light Green
|
Green on Light Magenta
|
|
Note: There must also be a sufficient difference in lightness between
text and background to ensure good readability!
top