Better Color and Text

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

Interactions

Color blindness: People who are color blind have difficulty differentiating certain colors and color combinations. Poorly chosen color combinations can hide meaning.
Low contrast: Low contrast combinations, such as white on light gray or white on yellow, can be very difficult to read for people with low sight and dyslexia.
Small Text: Some people use magnifier apps to enlarge text, alter the font appearance, or line spacing in order to read our content with greater ease.

Don't rely on color to convey meaning
- Your content should be understandable without color. For example, if you use red words to signify a warning, make sure the words on their own also convey the warning.
- Use patterns in addition to color. For example, the most common type of color blindness results in difficulty differentiating the colors red and green. However, those are also common colors for signifying something is open or closed. A solution is to use patterns in addition to color to signify something is closed.
- Some common color combinations to avoid: Green-Red; Green-Brown; Blue-Purple; Green-Blue; Light Green-Yellow; Blue-Grey; Green-Grey; Green-Black.
Avoid low contrast color combination:
- In the testing section is a tool to 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-contrast 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).