LibA11y: accessibility for LibGuides: 2.5 Color and Text

The Interaction

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.

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). Thus, if you alter your default text size, use relative sizes where possible (ie... small and x-large, or 1.5em and 90%).
Test your color combinations: Tota11y can help you identify low-constrast color combinations and tools are available to help you visualize your page with color blindness.

Contrast testing: Select the Contrast option in the Tota11y tool to see any low contrast color errors on your page. On the screen, you'll see areas of low contrast annotated in pink. The lower the contrast ratio number, the worse the issue.
Color combinations: The Spectrum color-blindness visualization tool (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).