Color is a powerful way to organize information and create visual interest. However, if the contrast is too low, or if color is the only way information is conveyed, large portions of your audience may miss your message entirely.
The “Why”
- Readability for All: High contrast (the difference in brightness between text and background) reduces eye strain for everyone and is a technical necessity for users with low vision or those viewing screens in bright sunlight.
- Color Blindness: Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. If you use “Red for Stop” and “Green for Go” without other cues, these users may see both as the same shade of muddy brown.
- Predictability: Consistent use of color helps users quickly identify links, headings, and important notes across different documents and pages.
Examples: Before vs. After
The “Low Contrast” Problem
- Bad: Light gray text on a white background, or yellow text on an HCU Orange background.
- The Result: The letters “wash out,” making the text nearly invisible to users with visual impairments.
- Good: Dark blue or black text on a white background, or white text on a dark blue background.
- The Difference: The text “pops” against the background, meeting the required 4.5:1 contrast ratio for standard text.
The “Color Alone” Problem
- Bad: “The items highlighted in red are mandatory for this week.”
- The Result: A color-blind student or a student using a screen reader (which doesn’t always announce color changes) won’t know which items are mandatory.
- Good: “Mandatory items are marked with red text and an asterisk (*).”
- The Difference: By adding a secondary cue (the asterisk), you’ve ensured the information is accessible through both color and symbol.
How-To: Strategies for Success
- Check Your Contrast: Use a tool like the to ensure your text meets the 4.5:1 ratio (or 3:1 for large headings).
- Don’t Use Color Alone: Always use a “backup” to convey meaning. This could be Bold text, Italics, icons (like ), or symbols (like *).
- Stick to the HCU Palette: Using the official HCU Brand Colors ensures a professional look, but always verify the contrast when layering them (e.g., Orange on White is usually a “Fail”).
- Be Careful with Links: If your link color is too close to your body text color, users may not realize it鈥檚 a clickable link unless they hover over it. Keeping links underlined is an accessibility best practice. Similarly, don’t use link colors for regular non-link text.
- Avoid Vibrating Colors: High-saturation combinations (like bright red text on a bright blue background) can cause visual “vibration” that makes text physically painful to read for some users.
- Think in Grayscale: A great test is to view your document in grayscale. If you can still understand the hierarchy and important points without color, your design is likely accessible.
Apply This to Your Work
Ready to check your colors? See the specific technical steps and brand guidelines for your preferred platform: