Text & color contrasts

On the screen, color contrasts come across with greater intensity than they would in print format because the colors consist of light rather than material. The eye has grown used to seeing in traditional print format, black type on a white background, a color scheme of limited suitability for use on the screen.

 

   type for the screen
              and for other digital media
   Achromatic-contrast: White | Black

 

There is more than one reason for this: white is represented on the screen by means of the additive color system, that is to say by each color emitting light at full intensity. Further, when black is used as text against this very bright background the result is a stark contrast similar to the color-complementary contrast. Both factors are hard on the eye. One way of reducing contrast is to render the font in dark grey on the white background.

 

   type for the screen
         and for other digital media
    Achromatic-contrast: White | Black 80%

 

White lettering on a grey screen similarly lowers the contrast – because of the much reduced brightness of the background, the eye is under less strain.

 

   type for the screen
       and for other digital media
    Achromatic-contrast: Black 80% | White

Otherwise, the white lettering can be set against a black (light free) background.

 

  type for the screen
        and for other digital media
   Achromatic-contrast: Black | White

 

The contrast can then be optimized by altering the text color to between a light or medium grey.

 

  type for the screen
      and for other digital media
    Achromatic-contrast: Black 50% | White

 

  type for the screen
          and for other digital media
    Achromatic-contrast: Black | White 80%

 

For some viewers, the combination of white or grey text on a black or dark-grey background feels overbearing. If the black background is combined with a primary or a secondary color, the resulting effects, while undoubtedly full of optical vitality, nevertheless have an unconvincing feel to them.

  type for the screen
      and for other digital media
   Achromatic-Chromativ contrast: Black | Cyan
  type for the screen
      and for other digital media
    Achromatic-Chromativ contrast: Black | Yellow

There is also the danger of excessive brightness and flicker effect due to the great intensity of the pure color. A white background combined with a pure color appears shrill and can, because of the intensive emission of light and the brightness of the background, even render a text illegible.

  type for the screen
      and for other digital media
  Achromatic-contrast: White | Yellow
  type for the screen
        and for other digital media
  Achromatic-contrast: White | Blue

On a black background, it is preferable to use a tertiary color of low saturation (in comparison to high saturation) or to replace the black background with a grey one.

type for the screen                   type for the screen
and for other digital media     and for other digital media
Achromatic-Chromativ contrast:
Black | R40%, G55%, B65%      Black | R80%, G45%, B45%

Care must still be taken to ensure that the grey is not of a similar brightness to the color, otherwise there will be a lack of contrast and the text, particularly smaller fonts, will be hard to read.

type for the screen
and for other digital media
Achromatic-Chromativ contrast: Black 30% | Green

A black letter on the page comes across more strongly than a white letter on a black printed background. The reasons for this lie in the absorbance of the paper. With smaller screen type, there is the danger of detailed serif fonts or linear intensity of the letter being lost against the background.

On the screen, the precise opposite is true. Unlike material, the white background is not perceptible because of its reflected light but rather the whiteness of the surface is caused by the additive color mixture emitting the maximum possible light. This means that a black letter (composed of dead light) appears faint against the background, while a white letter on a black screen appears to have more energy because of the intensity of the light. Black letters in small-sized font against white background can lack intensity, even if used only for text boxes. The black-white contrast is far more intense on the screen than on paper. For more suitable as a reading format is a dark blue background with light colored text – assuming, that is, that the designer is not trying to simulate paper, but is approaching the screen as a medium in its own right, complete with its own laws and attributes.

Similar guidelines apply to a pure colored background when used with black lettering: the luminescence of a pure color is far too bright as background for the black font.

type for the screen
and for other digital media
Achromatic-Chromativ contrast: Red | Black

Dark-grey lettering on a background of pure color is far more pleasant to read.

type for the screen
and for other digital media
Achromatic-Chromativ contrast: Red | Black 80%

The contrast between a pure color and white comes across as even more pronounced. If, instead of pure white lettering, a slightly off-white tone is used, the resulting lower contrast enhances readability.

type for the screen
and for other digital media
Achromatic-Chromativ contrast: Red | Black 10%

The same is true for black lettering set on a reduced pure color.

type for the screen
and for other digital media
Achromatic-Chromativ contrast: Red 70% | Black

Tertiary colors with high levels of intrinsic brightness are better suited for use as backgrounds, and can even be combined with black. The effect can be optimized if the black is replaced by a dark grey.

type for the screen
and for other digital media
Achromatic-Chromativ contrast:
R55% G80% B10% | Black
type for the screen
and for other digital media
Achromatic-Chromativ contrast:
R55% G80% B10% | Black 80%

To ensure good readability the designer must take care to ensure that the contrasts are neither too strong nor too weak.

type for the screen                   type for the screen
and for other digital media     and for other digital media
Achromatic-Chromativ contrast:
R55%, G80%, B10% | Black 30%      R55%, G80%, B10% | Black 10%

Complementary contrasts come across on the screen with greater intensity than on printed paper because the colors are composed of mixtures of light. The resulting visual sensation is – due to the strength of the light emitted and the purity of the colors – exceptionally well suited to drawing attention but not easily adapted to the presentation of text.

type for the screen
and for other digital media
Complementary Contrasts
type for the screen
and for other digital media
Complementary Contrasts
type for the screen
and for other digital media
Complementary Contrasts

The flicker-effect can make especially small and narrow segments of text as well as small fonts difficult or impossible to read due to excessive brightness at the edges. Complementary colors, being of high intrinsic brightness, can cause fine lines set against them to vanish almost entirely. If a visually striking page is required, then the tonality of saturation of the complementary color can be altered or a semi-complementary contrast (a color not directly opposite, used so as to maintain an acceptable level of readability. The text becomes easier to read without the overall effect being lost.

type for the screen
and for other digital media
Complementary Contrasts
type for the screen
and for other digital media
Complementary Contrasts

The light-dark contrast of using light-colored lettering set against a darker-colored background is very pleasant to the eye: the closer the background color is to black, the less light it emits.

type for the screen
and for other digital media
Light-dark contrasts
Dark background
type for the screen
and for other digital media
Light-dark contrasts
Dark background

So as to ensure that, despite the subdued background, the page still grabs the viewer’s attention, the designer can select a lively tone for use as text color. For shorter texts or on pages where the viewer is likely to move on fairly quickly, the color combination can be reversed, or the text color set against a white screen so as to keep things looking fresh.

type for the screen
and for other digital media
Light-dark contrasts
Light background
type for the screen
and for other digital media
Light-dark contrasts
Light background

A medium-dark background is well suited to use as a base-theme and combines nicely with very dark or very light colors. Using colors of equal brightness will, however, render the text illegible.

type for the screen
and for other digital media
Light-dark contrasts
Medium-Dark background
type for the screen
and for other digital media
Light-dark contrasts
Medium-Dark background
type for the screen
and for other digital media
Light-dark contrasts
Equal brigtness

Very smooth-looking contrasts can be achieved using temperature contrasts (two colors of the same temperature taken from consecutive positions on the color wheel). Here, the designer must pay special attention to levels of brightness, otherwise a small font will not be readable.

type for the screen
and for other digital media
Temperature contrast
Cold-cold contrast

Another kind of contrast that makes for a well balanced theme is the tonal based contrast. It’s almost too harmonious to be read and tends to work better as a background theme that, when looked at more closely, allows information like, say, a background logo or tag for a particular area of interest to be picked out.

type for the screen
and for other digital media
Tone-in-tone contrast
type for the screen
and for other digital media
Tone-in-tone contrast

A tone-in-tone contrast taken as background allows exciting structures to be played around with and a feeling of depth created: a lighter tone stands out, while a darker tone appears further away. For structured backgrounds, tone in tone contrasts are easy to handle and can have effective results when the designer overlays them with text. Difficulties arise in the case of non homogenous backgrounds, on which strong variations in brightness tend to show up. The information contained in the text quickly gets lost as the eye’s attention is drawn to the background structure.

Structured background

 

Type for the internet and
other digital media
by Veruschka Gotz
Distributed by North Light Books – Cincinati, Ohio

Designing Brand Identity           by Alina Wheeler

 

Buy from Amazon

Corporate Identity Design                      by Veronica Napoles

 

Buy from Amazon