Importance Color and Color Contrast
How people perceive color in digital content can be affected by their varying visual abilities and ambient lighting conditions (e.g., color blindness, low vision, age-related visual issues, too bright or too dark lighting conditions, etc.). The type of technology (e.g., monitors with varying color displays) being used to access the digital content can also affect color perception.
When color is an essential part of conveying information, people who cannot see or differentiate certain colors may encounter difficulties and may not easily access the digital content.
Color is usually determined visually by the measurement of hue, saturation, and brightness of light being reflected. Color contrast is measured by a brightness to darkness ratio that is often between foreground and background colors. A high contrast (e.g., a dark color shade vs a light color shade) would meet the optimum color contrast ratio. Having digital text and image content that uses insufficient color contrast can make the viewing experience difficult.
Sufficient and Insufficient Text and Background Color Contrast Examples
| Sufficient Contrast 1 | Sufficient Contrast 2 | Insufficient Contrast 1 | Insufficient Contrast 2 |
|---|---|---|---|
| black text on white background | white text on black background | light gray text on white background | dark gray text on black background |
Additionally, to ensure digital content is accessible, color must not be used alone to convey important information or to demonstrate emphasis.
Common Errors
These common errors hinder the accessibility and usability of digital content.
- Color alone is used to convey meaning.
- Insufficient color contrast between foreground text and background color.
- Insufficient color contrast when text is placed on images.
Best Practices
Follow these best practices to improve the accessibility and usability of the use of color and color contrast in your digital content.
Color Contrast
- Foreground text color and background color have sufficient color contrast.
- Text has appropriate color contrast with the background and meets contrast ratio requirements (WCAG 2, AA).
- For normal-sized (e.g., 12 point) text and images of text, the ratio is 4.5:1.
- For large text (over 18 point or 14 point bold), the ratio is at least 3:1.
- Linked text has appropriate color contrast: Link color should contrast sufficiently and meet the color contrast ratio requirements.
- 4.5:1 color contrast ratio for link text color to background color.
- 3:1 color contrast ratio for link text color to surrounding text color.
- Text has appropriate color contrast with the background and meets contrast ratio requirements (WCAG 2, AA).
- Non-text interface components (e.g., form or link focus outline, buttons, etc.) have a color contrast of at least 3:1 with adjacent colors and with default state colors.
- Sufficient color contrast should be used when text is placed on images so the text is readable and easily distinguishable from the image background.
- For charts, graphs, or diagrams, sufficient color contrast should be used when color fields are adjacent to each other and are used to compare information.
- Color contrast requirements are not necessary for text when used as part of a logo or when used for aesthetic purposes.
Using Color and a Visual Cue to Convey Information
- Color used to convey meaning, alert a person, or show emphasis needs to be paired with another visual cue (e.g., bold, symbol, etc.) so people can identify the importance without having to depend on color alone.
Examples:- Pair colored text with bold (e.g., Emphasis)
- This combination should be consistent and used sparingly to represent the same type of emphasis.
- Pair a form’s field alert highlight/outline with a text message.
Last Name: ________________ Last name is missing - Pair colored text with a symbol/icon (e.g. Required*, $-Money).
- For graphs, charts, and diagrams, pair color fields with text and data value.
- Pair colored text with bold (e.g., Emphasis)
Accessibility Checks
Use this check list as a guide to ensure your colors and color contrast are in an accessible format.
- Color is not used alone to convey information.
- Color used to convey meaning, alert a user, or show emphasis is paired with another visual cue (e.g., text, symbol, bold, etc.).
- There is sufficient color contrast between foreground text, linked text, and background colors.
- Text placed on images is easily distinguishable and readable visually and by assistive technology.
Additional Resources
Color Contrast Checker Tools
- To check for proper color contrast in digital content use a color contrast checker such as WebAIM: Color Contrast Checker and/or WebAIM: Link Color Contrast Checker.
- WebAim: Tools and Techniques for Evaluating Color and Contrast
- Colblis Color Blind Simulator: Check Images and Graphic Design Content
- Toptal: Colorblind Web Page Simulator