Color

Skip to page content

Color

Making content distinguishable is essential for learners to decipher and interact with subject matter. This is especially true for low-vision and color blind users and is best achieved by providing sufficient color contrast between foreground (text) and background. Additionally, color shouldn’t be used as the only way to convey meaning, prompt a response, or distinguish a visual element because it can make content inaccessible to blind and visually impaired users.

WCAG 2.0 Guidelines

1.4.1 A Links to an external site. and 1.4.3 AA Links to an external site.

Sources

Overview

Download the Download unremediated Accessibility Quick Start Guide - Color

 prior to starting this module.

Avoid using color as the only way to convey meaning and provide sufficient color contrast between the background and foreground.

  • Accompany colored content with other visual indicators, such as an asterisk with an explanation of how color is being used to convey meaning.
  • Avoid using red and green to convey meaning or as the only means to differentiate content (Users who have color-blindness benefit when information conveyed by color is available in other visual ways).
  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (normal text) and 3:1 for large and linked text. Large text is described as 18pt or 14pt bold.
  • Hyperlinked text can have a contrast ratio of 3:1.
  • Use the following tools to measure contrast ratios:

Modify Headings 2

These next steps demonstrate how to add a colored background to the Heading 2 style.  Color contrast between the foreground and background is checked using Colour Contrast Analyser.  Download Colour Contrast Analyser Links to an external site. and follow along with these steps.

    1. Place your cursor next to the first H2 in the document, "Headings" 
    2. From the Styles tool, select the triangle to the right of Heading 2 (or right click)
    3. Select "Modify Style..."Select the Heading 2 Headings, then from the Styles Pane, select the pull down for Heading 2 and select Modify Style.
    4. Select the "Format" pull down menu

    5. Select "Border..."Locate the Format pull down and select Border

    6. From the "Borders" pane, select "Box"
    7. Select "Shading"From the Borders option, select Box then select Shading
    8. In the pop up menu, select the triangle next to "No Color"
    9. Select a light color such as light blue.  Feel free to experiment using different color schemes.
    10. Select OKFrom the Fill pul down menu, select a light blue color and choose OK
    11. Select OK one more time to close the menu.Select OK

Colour Contrast Analyser

  1. Open Colour Contrast Analyser
  2. Use the first dropper to select the foreground, or font color for Heading 2
  3. Use the second dropper to select the background color for Heading 2
  4. The results of the above steps are displayed on the lower portion of Colour Contrast Analyser's interface.Use the dropper to select the foreground and background colors for heading 2. The results of the above are listed and verify that the color contrast is sufficient to meet WCAG 2.1

Reading Check

Use the discussion button below to start or view discussions related to this workshop.

Reading Check