2.3 Color and Text

Color and text often interact, so we'll cover both here...

Last updated 1 year ago

Was this helpful?

Color and text often interact, so we'll cover both here...

Color and content: Screen readers cannot verbalize information offered only by color.
Color blindness: Students with color blindness may not be able to differentiate colors from poorly chosen combinations. For example, green and red symbolizing open and closed.
Low contrast: Low contrast combinations, such as white on gray or white on yellow, can be very difficult for students with low sight and dyslexia.
Small Text: Similarly, some people need to enlarge text, alter the font, or line spacing in order to read our content.
Lists: The number of items in a list are communicated as well as the items in the list.

Solutions

Do not rely on color to convey meaning: Insure web content is understood as easily without color as it is with color. A common approach is to use words as well as colors to convey meaning. For example, a warning message in red should also include wording to make it obvious that it is a warning.
Test color and contrast combinations: Resources below can help you see how your color combinations will be perceived by someone with color blindness.
Avoid using absolute text sizes: Older browsers are unable to resize absolute sized text, such as 16px (pixels). If you alter your default text sizes, use relative sizes where possible — for instance small and x-large, or 1.5em and 90%.
Test your color combinations: The WAVE tools allows you to not only scan for errors, but also test specific low-contrast color combinations. Specialized tools are available to help you visualize your page with color blindness.

Contrast testing: On the WAVE tool, select the "Contrast" tab to view any errors. Click each error icon to see where on your page the errors reside. The Contrast tab also offers a color mixer that lets you find the proper color to fix the errors.

Do not rely on color to convey meaning: Insure web content is understood as easily without color as it is with color. A common approach is to use words as well as colors to convey meaning. For example, a warning message in red should also include wording to make it obvious that it is a warning.
Test color and contrast combinations: Resources below can help you see how your color combinations will be perceived by someone with color blindness.
Avoid using absolute text sizes: Older browsers are unable to resize absolute sized text, such as 16px (pixels). If you alter your default text sizes, use relative sizes where possible — for instance small and x-large, or 1.5em and 90%.
Test your color combinations: The WAVE tools allows you to not only scan for errors, but also test specific low-contrast color combinations. Specialized tools are available to help you visualize your page with color blindness.

[Open captioned video 5:14min]: What to think about when using color to convey information.

Contrast testing: On the WAVE tool, select the "Contrast" tab to view any errors. Click each error icon to see where on your page the errors reside. The Contrast tab also offers a color mixer that lets you find the proper color to fix the errors.
Color combinations: The (Chrome browser extension) will change your screen colors to emulate how your webpage would be perceived by people with varying types of color blindness. Insure your page elements are differentiated for all sight types.
Zoom your fonts: Use Command + or Control + to enlarge your type to at least 200%. Is your page still functional? If not, examine how your fonts are sized and/or talk with you website manager about the overall site. (Control-0 returns you to normal size). Here's a .