Color Contrast
Ensuring sufficient contrast for readability
Color Contrast for Accessibility
Sufficient color contrast ensures that text and important visual elements are readable by users with low vision, color blindness, or those viewing content in bright environments.
Why Color Contrast Matters:
- Essential for users with low vision or color blindness
- Improves readability in bright environments
- Benefits aging eyes and reading difficulties
- Required for WCAG 2.1 Level AA compliance
WCAG Contrast Requirements
Level AA Standards
- Normal text: 4.5:1 minimum ratio
- Large text: 3:1 minimum ratio
- Non-text elements: 3:1 for UI components
Large text: 18pt+ regular or 14pt+ bold (24px+ or 19px+ bold)
WebAIM Contrast Checker
Free Testing Tool
WebAIM provides the most popular and reliable contrast checking tool used by accessibility professionals worldwide.
WebAIM Contrast Checker:
webaim.org/resources/contrastchecker/
- • Real-time contrast ratio calculations
- • WCAG AA and AAA compliance indicators
- • Color picker tools
- • Simulation for color blindness
Common Contrast Problems
❌ Problem Colors
- • Light gray text on white
- • Yellow text on white
- • Red and green combinations
- • Blue links on dark backgrounds
- • Placeholder text (often too light)
✅ Safe Combinations
- • Black text on white background
- • White text on dark blue/black
- • Dark blue text on white
- • High contrast theme colors
- • System default colors
Additional Issues
- • Relying on color alone for meaning
- • Insufficient focus indicators
- • Low contrast in charts/graphs
- • Branded colors that don't meet standards
Microsoft Office: Color Contrast
Microsoft Office applications include accessibility checkers and high contrast themes to help you create accessible color combinations.
Using Office Accessibility Checker
Running the Accessibility Checker
- 1.Go to Review tab → Check Accessibility
- 2.Look for "Hard to read text contrast" warnings
- 3.Click on each warning to see the problematic text
- 4.Follow the suggested actions to fix contrast issues
- 5.Re-run the checker to verify fixes
Choosing Accessible Colors
- 1.Use built-in theme colors when possible
- 2.Go to Design tab → Variants → Colors for accessible themes
- 3.Test custom colors with WebAIM Contrast Checker
- 4.For custom colors: Home tab → Font Color → More Colors
- 5.Record RGB values to test in WebAIM tool
High Contrast Preview
- 1.Use View tab → "Reading View" or "Print Preview"
- 2.Check how document looks in black and white
- 3.Enable Windows High Contrast mode to test
- 4.Ensure all text remains readable
PowerPoint Color Best Practices
Presentation Accessibility
- •Use high contrast slide templates
- •Avoid light text on light backgrounds
- •Test slides in presentation mode
- •Consider room lighting when choosing colors
- •Don't rely on color alone to convey information
Office Color Testing Workflow
Create content with your chosen colors
Run Office Accessibility Checker
Test questionable colors with WebAIM Contrast Checker
Adjust colors as needed and re-test
Preview in high contrast mode
Canvas LMS: Color Contrast
Canvas provides accessible default colors, but custom styling requires careful attention to contrast ratios and accessibility standards.
Canvas Rich Content Editor
Using Safe Canvas Colors
- 1.Stick to Canvas default color palette when possible
- 2.Use the text color dropdown in Rich Content Editor
- 3.Canvas defaults meet accessibility standards
- 4.Avoid custom CSS unless you can test contrast
Testing Custom Colors
- 1.When using custom colors, note the hex code
- 2.Go to WebAIM Contrast Checker (webaim.org/resources/contrastchecker/)
- 3.Enter your text color and background color
- 4.Verify it shows "Pass" for WCAG AA
- 5.Adjust colors if needed and re-test
Canvas Accessibility Checker
- 1.Canvas automatically checks for some contrast issues
- 2.Look for accessibility warnings when saving content
- 3.Address any flagged color contrast problems
- 4.Test your course in high contrast mode
Canvas Theme and Branding
Institution Branding Considerations
- • Institutional colors may not meet contrast standards
- • Work with your Canvas admin on accessible themes
- • Test branded elements with WebAIM Contrast Checker
- • Consider accessibility when requesting theme changes
- • Have high-contrast alternatives for branded content
Student Experience
- • Students can enable high contrast mode in Canvas
- • Canvas supports system-level contrast settings
- • Dark mode options may be available
- • Your content should work in all viewing modes
Canvas Color Best Practices
Safe Practices
- • Use Canvas default colors
- • Test all custom styling
- • Provide multiple ways to convey information
- • Consider different viewing environments
Testing Methods
- • WebAIM Contrast Checker for custom colors
- • Canvas accessibility warnings
- • High contrast mode testing
- • Mobile device testing
Color Contrast Best Practices
Follow these guidelines to ensure your content is readable by all users, regardless of vision abilities or viewing conditions.
Using WebAIM Contrast Checker
Step-by-Step Guide
- 1.Go to webaim.org/resources/contrastchecker/
- 2.Enter your foreground color (text color) hex code
- 3.Enter your background color hex code
- 4.Check the results: Look for "Pass" under WCAG AA
- 5.If it fails, use the color picker to find passing alternatives
Quick Contrast Guidelines
Always Safe
- Black text on white background (21:1 ratio)
- White text on black background (21:1 ratio)
- Dark blue (#000080) on white (12.6:1 ratio)
- System default colors
Often Problematic
- Light gray (#999999) on white (2.8:1 - fails)
- Yellow (#FFFF00) on white (1.1:1 - fails)
- Red (#FF0000) and green (#00FF00) combinations
- Branded colors without testing
Beyond Color Alone
Don't Rely on Color Alone
Never use only color to convey important information. Always provide additional cues:
- • Use icons alongside color coding
- • Include text labels ("Error", "Success", "Warning")
- • Add patterns or shapes to distinguish elements
- • Use text formatting (bold, italics) for emphasis
Color Blindness Considerations
- • Red-green color blindness affects 8% of men, 0.5% of women
- • Test designs with color blindness simulators
- • Use high contrast combinations
- • Consider blue/orange instead of red/green for comparisons
The 5-Second Contrast Test
Step back from your screen, squint your eyes, or view your content on a mobile device in bright sunlight. Can you still read all the text clearly? If not, your contrast needs improvement.
Remember: WebAIM Contrast Checker is free, fast, and the industry standard. When in doubt, test it out!