Colored Text

Designing Legible Text | Text and Background Color

Designing Legible Text

Colored Text Against White and Black Backgrounds

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

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.

Blue on Red
Red on Blue

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
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 top

 Source:  Recommendations for Charts and Graphics