-
Overview of Color Contrast
Color choice, font selection, and how text is formatted in a course site impacts its accessibility. The colors used for text the level of contrast between the text and the page background both have a huge impact on the site’s readability. Formatting text you want to emphasize (using bold, italics, etc.) makes a difference in accessibility also.
-
How to Select Accessible Color Contrast & Fonts
There are two accessibility issues relating to use of color: first, using color to convey meaning, and second, readability due to the contrast of text on background
Color
An estimated 300 million people in the world are color blind. Ninety-eight percent is red/green color blindness.
- Eight percent of men are color blind (1 in 12 men)
- One half percent of women are color blind (1 in 200)
To make your pages accessible to all students, do not use color alone for emphasis in text. Tools like Coblis (Color Blindness Simulator) can help simulate how your design looks for people with different types of colorblindness. When creating course materials, avoid using combinations like light green on yellow, or red on green (which is difficult for colorblind users to distinguish).
Contrast
The contrast between text and background impacts readability for both sighted and visually-impaired students. Consider the differences in readability in these examples. Which is most readable?
- Can you read this? (yellow text says, “can you read this?”)
- How about this? (blue text says, “how about this?”)
- or this sentence? (black text says, “or this sentence?”)
Which of these examples has the greatest contrast and is easiest to read?
The Web Content Accessibility Guidelines state that, "the visual representation of text and images of text has a contrast ratio of at least 4.5:1 except for the following: Large Text (with at least 18 point or 14 point bold), Incidental (text or images of text that are pure decoration or are part of a picture that contains significant other visual content), and Logotypes (text that is part of a logo or brand name)."
Accessible Emphasis
There are several ways to emphasize text that are more accessible than others. Below the use of Bold, all CAPS, italics, and underline is discussed.
- Bold: Using bold formatting to emphasize a word or phrase in text is acceptable; however, remember to use it sparingly. Using bold formatting excessively essentially emphasizes nothing since everything is emphasized. Overuse of bold formatting causes eye fatigue and reduces comprehension.
- All CAPS: The use of all CAPS as a means of emphasis is discouraged. It is thought of as shouting. All caps formatting is also more difficult to read and hard to scan.
- Italics: Italics should be avoided except for a word or two, such as a foreign language word or phrase. It may also be used for a magazine or book title. The use of large blocks of italics impacts readability particularly on a computer screen.
- Underline: The use of underline should be avoided on web pages due to the convention of underlined text indicating a link.
-
How To Use UDOIT To Address Color and Contrast Issues
Potential Use of Color Alone to Communicate Information
In the UDOIT interface, whenever you come across a "Potential Use of Color Alone to Communicate Information" error, select either "make this text bold" or "make this text italicized." You can also choose to remove the color, but you don't have to. Remember to "Save" your changes before moving on to the next issue.Insufficient Text Color Contrast With the Background
In the UDOIT interface, whenever you encounter an "Insufficient Text Color Contrast With the Background" error, you can change the background or text color. Use the arrows to make text or background lighter or darker, or choose from a preset color picker. Adjust the color until you meet an appropriate contrast ratio: WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Remember to "Save" your changes before moving on to the next issue.
-
Summary & Key Takeaways
Summary & Key Takeaways
- Be mindful of color choice. Select high-contrast colors (black text on a white background, for example).
- Check course materials to assess if you are using color as the only indicator for information, for example a graph where students need to compare a red line to a green line. Use dots, dashes, or other symbols to be considerate of those with color blindness.
- Using UDOIT can help you to address issues with color and contrast quickly.