Technique G209:Provide sufficient contrast at the boundaries between adjoining colors

Applicability

For graphics which use multiple colours adjacent to each other.

This technique relates to 1.4.11: Non-text Contrast (Sufficient).

Description

The objective of this technique is to ensure people with moderately low vision can distinguish boundaries between adjoining segments of color.

The success criteria for non-text contrast uses the term "graphical object" to cover small simple graphics, and parts of larger complex graphics. This technique focuses on solid color segments where the boundaries between colors convey meaning.

When selecting colors for graphics with multiple colors, consider adjoining colors and test that the contrast ratio is at least 3:1. If adjoining colors have less than 3:1 color contrast ratio difference add a border with at least a 3:1 color contrast with each color.

Examples

Example 1: Pie chart with alternative light/dark colors

Pie chart of favorite candy flavours, including text labels and contrasting segments.
The contrast between adjoining segments of the pie chart range from 5.8 to 9.4.

Example 2: Pie chart with borders between segments

Pie chart of favorite candy flavours, including text labels and contrasting borders between segments.
The contrast between the segments of the pie chart range from 1.1 to 1.8. A border has been added with at least a 3:1 contrast ratio with the colors to distinguish between segments. .

Example 3: Map with border boundaries

Map showing simple regions with dark background colours and a light border between regions.
The color contrast of areas within the map range between 1.3 and 1.8. A boundary line is added with a color contrast ratio of at least 3:1 with the area colors.

Example 4: Pie chart with black and white borders

Pie chart of favorite candy flavours, including text labels and black and white borders between segments.
The colored areas in the chart are both dark and light. A black and white boundary line is added to ensure sufficient contrast between both light and dark colors.

Other sources

No endorsement implied.

Tests

Procedure

For each graphical object required for understanding use a color contrast tool to:

  1. Measure the contrast ratio of each color compared to the adjacent color(s) or border (if present).
  2. Check that the contrast ratio is at least 3:1 for each adjacent color or border (if present).

Expected Results

  • #2 is true