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. 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. Yellow text on a white background or blue text on a black background, are difficult to read due to the low level of contrast between figure and ground. 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. Some color combinations, such as red text on a blue background, cause illusions when positioned together. Sensitivity to 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. 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.

Itten's Color Contrasts Johannes Itten was one of the first people to define and identify strategies for successful color combinations. Through his research he devised seven methodologies for coordinating colors utilizing the hue's contrasting properties. These contrasts add other variations with respect to the intensity of the respective hues; i.e. contrasts may be obtained due to light, moderate, or dark value. The contrast of saturation The contrast of light and dark The contrast of extension

The contrast is formed by the juxtaposition of light and dark values and their relative saturation.

The contrast is formed by the juxtaposition of light and dark values. This could be a monochromatic composition.

Also known as the Contrast of Proportion. The contrast is formed by assigning proportional field sizes in relation to the visual weight of a color. Simultaneous contrast

The contrast of complements

The contrast is formed by the juxtaposition of color wheel or perceptual opposites.

The contrast is formed when the boundaries between colors perceptually vibrate. Some interesting illusions are accomplished with this contrast.

The contrast of hue

The contrast of warm and cool

The contrast is formed by the juxtaposition of different hues. The greater the distance between hues on a color wheel, the greater the contrast.

The contrast is formed by the juxtaposition of hues considered 'warm' or 'cool.

Proportion & Intensity When colors are juxtaposed, our eyes perceive a visual mix. This mix will differ depending on the proportions of allocated areas.

The color with the largest proportional area is the dominant color (the ground). Smaller areas are subdominant colors. Accent colors are those with a small relative area, but offer a contrast because of a variation in hue, intensity, or saturation (the figure). Placing small areas of light color on a dark background, or a small area of dark on a light background will create an accent. If large areas of a light hue are used, the whole area will appear light; conversely, if large areas of dark values are used, the whole area appears dark. Alternating color by intensity rather than proportion will also change the perceived visual mix of color.

Dominant color Sub-dominant colors Accent

Dominant color Sub-dominant colors Accent

Dominant color Sub-dominant colors Accent

Dominant color Sub-dominant colors Accent

Contrast & Dominance When creating a compositioneither something freeform, or a more text based layout, a determination for the final impact of the whole presentation needs to be identified. Is your intent to craft a vibrant, attention grabbing ad, or a presentation with a low, or more moderate level of contrast? These decisions concern what is known as the dominant elements of the design. The dominant element may be classified as either "contrast dominant" or "value dominant." Designs that evidence contrast dominance or value dominance are then sub-divided into low, moderate, and high contrast, or light, medium, and dark value categories. The choice of colors will enhance or minimize the overall impact. It is easiest to understand the difference between dominant elements in the following compositions from a distance, or by squinting your eyes a bit. If the proximity between the neighboring hues is less apparent when you squint, the overall composition a displays lower contrast level; if the overall composition appears light, it has a light value. Conversely, if distinctions between hues are very apparent, the contrast is high, and if the overall composition appears dark, the value level is dark. Understanding how the relationships between the colors of a chosen palette will affect the final outcome of an overall composition is integral to mastering the use of color.

Examples of Contrast Dominance In the examples below, the overall contrast level of a composition changes with the range of luminosity between chosen hues.

Low contrast Low contrast compositions use colors within a narrow range of luminosity or brightness levels. Examples of Value Dominance

Moderate contrast moderate contrast compositions use colors within a moderate range of luminosity or brightness

High contrast High contrast compositions colors range from very light (high-luminosity) to very dark (low luminosity).

In the examples below, the overall value of each composition changes with the incorporated hues' relative saturation.

Light value A composition made up of tints, displays an overall light value.

Medium value A medium value composition is made up of a balance between tints, saturated hues, and shades.

Dark value A dark value composition displays mostly shades.

Color Shade and Tints

Using a color wheel divided into various shades and tints is one method of identifying possible options for color schemes. The split complementary relationship shown in this example presents many possible combinations. By varying the saturation and experimenting with shades and tints within the hue relationship, you can achieve quite a variety of palette options.

Moderately-high contrast, medium value, composition using fully saturated hues.

Moderately-low contrast, medium-light value, using tints & various saturation levels.

High contrast, medium value, composition using shades, tints & various saturation levels.

Moderate contrast, medium value, using shades, tints & various saturation levels.

Moderately-low contrast, medium-dark value, using shades & various saturation levels.

High contrast, light value, using shades, tints & various saturation levels. Color Studies Colors of a complementary relationship.

Low contrast, medium value, using shades, tints & various saturation levels. Colors of a complementary relationship assigned equal proportion.

Moderately-high contrast, medium value, using shades, tints & various saturation levels. Colors reassigned with proportions allocated to dominant and subdominant areas.

Color intensity and proportion modified. Using tints and shades of the original colors results in a moderate level of contrast and medium value.

Colors applied to composition. Colors of a triad relationship.

Colors of a triad relationship assigned equal proportion. Colors applied to composition.

Color intensity and proportion modified the whole area displays a moderately-high contrast and medium value.

Colors reassigned with proportions allocated to dominant, subdominant, and accent areas.

Color intensity and saturation modified - the whole area displays a moderately-high contrast level.

Colors applied to composition.

Color intensity and saturation modified - the whole area displays a medium/dark value. Colors applied to composition.

Colors applied to composition. Color intensity and saturation modified - the whole area displays a moderately low contrast level.

Color intensity and saturation modified - the whole area displays a light value,

Colors applied to composition.