7 Using Color

On This Page

• Communicating Meaning
• Color Contrast
• Conflicting Colors

Communicating Meaning

Color is a useful tool for creating visually engaging learning materials. However, color alone should never be used to indicate meaning, importance, or emphasis. Color is never announced to screen reader users, and color blind learners may not be able to interpret differences in colors or shades. This applies to font colors, text highlights, and background colors applied with HTML.

If color is used to provide general emphasis, replace it with bold or italic text.

If an image uses color to denote meaning, discuss with the graphics team how the image can be recreated accessibly. Often, color can be combined with unique symbols, shapes, or shading patterns to make each item distinct for all sighted learners. Different shades of the same color, if distinct enough, can also work in some cases. Review the finished product using a color blindness simulator like Coblis, or if possible test the image with people who are color blind.

If instructional materials use color to highlight specific concepts, consider the following accessible fixes:

• If two or more concepts are being compared, don’t switch back and forth between the concepts. Instead, describe each concept in its own section first, then create an additional section that actively compares them. Walk learners through the comparison step by step.
• Consider creating a table that compares the features of each concept.
• Summarize key takeaways at the end of the content.

If something is particularly important, make sure it’s described as such in text. Options include:

• Give the information its own heading (ideal for large blocks of text)
• Write “Important:” before the information (ideal for 1-2 sentences)

You can then emphasize the content visually with a callout box, div border, eye-catching icon, or other graphical features.

Color Contrast

Sufficient color contrast is essential for low vision learners to be able to view the content. Other learners may also find it difficult to read text with very poor contrast. WCAG 2.1 level AA contrast guidelines indicate sufficient contrast to be 4.5:1 for body text. For more information, review this color accessibility summary from WebAIM.

You can use the interactive WebAIM contrast checker to determine if your design meets level AA requirements. (The TPGi Colour Contrast Analyser is also an easy, free software available with some additional features.)

To use the contrast checker:

1. Open the editor for your course page.
2. Switch to the HTML editor.
3. Find the portion of the page you want to test.
4. Copy the six-digit hexadecimal color code for the text color. Paste the code into the contrast checker’s foreground box.
5. Copy the hexadecimal color code for the text background. This may be applied to the text, heading, or nearby span or div. Paste the code into the contrast checker’s background box.
6. Review the contrast ratio result (below or next to the color boxes).

When using software like Microsoft Word, you may need to convert RGB values to hexadecimal before pasting them into the form. To access the RGB values in Microsoft products:

1. Select the text, background shape, or slide background you want to access.
2. Open the color picker for the object.
   1. For text, click on the expand arrow next to Font Color in the ribbon and select “More colors…”. In the menu that appears, switch to the Custom tab.
   2. For shapes, click on the expand arrow next to Shape Fill in the ribbon and select “More fill colors…”. In the menu that appears, switch to the Custom tab.
   3. For slide backgrounds in PowerPoint, switch to the Design tab on the ribbon and select Format Background. Click the expand arrow next to the Fill Color box and select “More colors…”. In the menu that appears, switch to the custom tab.
3. Under Color Model, there should be three inputs called Red, Green, and Blue. Note the numbers next to these labels in order, from top to bottom.
4. Switch to the convert RGB values to hexadecimal form. Under RGB, enter the numbers in order separated by commas.
5. The hexadecimal number will update itself once you click away from the RGB box. Copy the hexadecimal number and paste it into the appropriate area of the WebAIM contrast checker.

Interpreting Results

A ratio of 4.5:1 or higher is sufficient for most text. If your ratio is lower, one or both of the colors must be changed to increase the contrast.

• Review the previews for normal and large text. These previews can help you determine what changes to make.
• You can change the foreground and background colors directly in the form by dragging on the Lightness bar or clicking on the color preview next to the hexadecimal code.
• When you have finalized the new colors, update them in your document or web page.
  • For web pages, copy and paste the hexadecimal codes into your HTML and save the page.
  • For software like Microsoft Word, you will need to convert the hexadecimal code back into RGB and update the RGB values in the “More colors…” menu.
    • You can use the RGB to hexadecimal converter to do this. Just enter the hexadecimal code into the appropriate box and the RGB values will be updated. Transfer the RGB codes back into the inputs in the “More colors…” menu.
    • Make sure to click “OK” in the “More colors…” menu so your colors update in your document.
    • Make sure to save your document’s changes when you are finished.

Conflicting Colors

Some color combinations for text and background don’t work well together, even when they meet contrast requirements. They can cause the eye to jump around the page, and reading for extended periods in these combinations can lead to eye fatigue. Some color combinations are also inaccessible to people who are color blind.

Whenever possible, use the default settings for your platform or program (most commonly black text on a white background). This allows learners to potentially customize their web browser or computer settings to suit their needs, such as applying dark mode or a high contrast color scheme.

When adding color for design purposes, make sure to view the color yourself in the finished product or get feedback from a colleague. In particular, avoid combinations of red and blue to prevent eye fatigue. Also avoid combinations of blue and green or red and green, as these are inaccessible to the most common forms of color blindness.