Color Formatting
Color Formatting
Do not rely on Color to Convey Meaning
- Is all information conveyed without relying on color?
How?
Do not rely on color for important information. Use color and other sensory characteristics (such as size, shape and location) to convey meaning. Any important information denoted through color needs to be available through text as well.
Why is this important?
Users with visual deficiencies will have difficulty understanding information denoted with color alone.
Resources
- WCAG 1.3.3 Sensory Characteristics
- WCAG 1.4.1 Use of Color
- WCAG 1.3.1 Info and Relationships
- Jim Thatcher's Web Accessibility Course Section on Color
- WebAim: Visual Disabilities: Color-blindness
- WAVE Accessibility Evaluation Tool – includes color contrast tool and desaturate feature
- Change the Font Color (Color of Text)
- Change the Background or Color in Word 2016 for Windows
- DAT Toolbar User Guide: Inspect – Microsoft Accessibility Checker, Screen Reader, and Color Contrast Checker
Meet the Required Color Contrast
- Is there enough contrast between the background and foreground?
How?
Use a color contrast tool to meet contrast minimums. The standard for text less than 18 point or less than 14 point if bolded must have a contrast ratio of 4.5:1 or more. For text 18 point or larger or 14 point if bolded, the contrast ratio must be 3.0:1 or higher. Incidental text, text overlaid on images and logotypes are excluded from the requirement.
Table with Color Contrast Ratios by Text Size or Type
| Type or Size of Text | Contrast Ratio |
|---|---|
| Standard | 4.5:1 |
| Large Text (14 point bold or 18 point regular) | 3:1 |
| Incidental text, text overlaid on images and logotypes | Excluded from requirement |
Why is this important?
People who have vision deficiencies may have difficulty reading information when there is not enough contrast between the foreground and background.
Resources
- WCAG 1.4.3 Contrast (Minimum)
- The A11Y Project: What is Color Contrast?
- Color Contrast
Colors and Contrast- Jim Thatcher's Web Accessibility Course Section on Color
- Use of Color: Understanding WCAG Success Criterion 1.4.1
- Contrast (Minimum): Understanding WCAG Success Criterion 1.4.3
- Color Contrast Analysis
- The Paciello Group Colour Contrast Analyser
- WebAIM: Color Contrast Checker
- WAVE Accessibility Evaluation Tool – includes color contrast tool and desaturate feature
- Wave Browser Extension for Chrome or Mozilla – includes color contrast tool
- Accessible Color Palette Builder
- Change the Font Color (Color of Text)
- Change the Background or Color in Word 2016 for Windows
- DAT Toolbar User Guide: Inspect – Microsoft Accessibility Checker, Screen Reader, and Color Contrast Checker