Color Worqx

Color & Contrast

Every visual presentation involves figure-ground relationships. This relationship between a subject (or figure) and its surrounding field (ground) will evidence a level of contrast; the more an object contrasts with its surrounds, the more visible it becomes.

Some combinations are difficult to read due to the low level of contrast between figure and ground:
Yellow text on a white background. Blue text on a black background.

When we create visuals that are intended to be read, offering the viewer enough contrast between the background (paper or screen) and the text is important. Text presentations ideally offer at least an 80% contrast between figure and ground. (Black text on a white background is ideal.) If there is not enough contrast between figure and ground, a viewer will squint to view the text, causing eye fatigue.


simultaneous contrast

Some color combinations can cause illusions when positioned together:
Red text on a blue background

An occurrence known as 'simultaneous contrast' (or chromostereopsis,) may happen when opposing colors are placed in close proximity to each other. Text may appear to vibrate, or cast a shadow. Eye strain and fatigue will result if a viewer focuses on a document displaying similar properties for an extended time period.


Colorblind Deficiencies.

The Design of visual documents or signage without thought to the overall contrast level between figure and ground can be problematic for people with sight deficiencies. My first-hand experience with this occurred years ago when visiting a hospital with a friend who was colorblind. The hospital had creatively marked the floor with "road maps" to various areas like the lab, lobby, etc. Unfortunately, they used red and green lines and my friend could not distinguish between the colors. If a visual document uses color to relate important information, insure that no information is lost, or potentially misunderstood, when the color is not available.

choosing complementary colors

When choosing complementary colors, fully saturated colors will offer the highest level of contrast. Choosing from tints or shades within the hue family reduces the overall contrast of the composition.

full value complementary shades and tints

Continue tutorial, view: Itten's Contrasts