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.
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.
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.
Otherwise, the white lettering can be set against a black (light free) background.
The contrast can then be optimized by altering the text color to between a light or medium grey.
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.
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.
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.
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.
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.
Dark-grey lettering on a background of pure color is far more pleasant to read.
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.
The same is true for black lettering set on a reduced pure color.
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.
To ensure good readability the designer must take care to ensure that the contrasts are neither too strong nor too weak.
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.
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.
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.
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.
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.
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.
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.
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.
Buy from Amazon
Logo Design
Corporate Identity Design
Total Design was established in 1963 by Friso Kramer, Ben Bos, Benno Wissing, Wim Crouwel and the Schwarz Brothers. This group of ambitious Dutch designers has set new benchmarks for product design, exhibition design, cultural design and identity design.The book written by Ben Bos presents the story of the studio’s golden period from 1963 to 1973 and it’s fundamental role in graphic design.
Click to buy