Logo of the Hanover Hornets featuring a stylized hornet in vibrant colors.

HANOVER SCHOOL DISTRICT 28

WEATHER STATUS:

NORMAL

WEATHER STATUS:

NORMAL

ADA Compliant Color Contrast Guide

ADA Compliant Color Contrast Guide

Hanover School District 28 • Ensuring Equal Access to Education

Why Color Contrast Matters

Proper color contrast ensures that all users, including those with visual impairments, color blindness, or age-related vision changes, can read and interact with digital content. Good contrast ratios benefit everyone, especially in bright lighting conditions or when using mobile devices outdoors. Following WCAG guidelines helps create inclusive educational materials that serve all learners effectively.

WCAG Color Contrast Standards

Level AA (Standard)
4.5:1
Normal Text: Minimum contrast ratio required for text smaller than 18pt regular or 14pt bold. This is the recommended standard for most educational content.
Level AA Large Text
3:1
Large Text: Minimum contrast ratio for text 18pt+ regular or 14pt+ bold. Applies to headings, buttons, and emphasized content.
Level AAA (Enhanced)
7:1
Enhanced: Higher contrast for users with severe visual impairments. Recommended for critical information and maximum accessibility.
1

Test All Text-Background Combinations

Every text element must meet minimum contrast ratios against its background. This includes body text, headings, buttons, form labels, and error messages.

Excellent Contrast
21:1
Black text on white background provides maximum readability for all users
White text on black background works well for dark mode interfaces
Poor Contrast
1.8:1
Light gray text on white is nearly impossible to read for many users
This combination fails accessibility standards completely
2

Consider Different Types of Vision

Design for various visual conditions including color blindness, low vision, cataracts, and age-related vision changes that affect contrast sensitivity.

High Contrast (7.1:1)
7.1:1
Dark gray text provides excellent readability while being easier on the eyes than pure black
Minimum AA (4.6:1)
4.6:1
Medium gray text meets WCAG AA standards for normal-sized text content
3

Don't Rely on Color Alone

Never use color as the only way to convey information. Always provide additional indicators like text labels, icons, patterns, or shapes.

Color + Text
✓ Success: Form submitted successfully
✗ Error: Please fill required fields
Color Only
Form submitted successfully
Please fill required fields
4

Test in Different Lighting Conditions

Colors that look good on a desktop monitor may be difficult to read on mobile devices in bright sunlight or low-light environments.

Outdoor-Friendly
12.6:1
High contrast combinations work well in all lighting conditions and on all devices
Indoor Only
2.3:1
Medium contrast may be readable indoors but fails in bright sunlight
5

Account for Interactive Elements

Buttons, links, form fields, and other interactive elements need adequate contrast in all states: default, hover, focus, and disabled.

Accessible Button States
Default Button (5.9:1)
Hover/Focus (7.2:1)
Poor Button Contrast
Low Contrast (1.6:1)
Barely Visible (1.2:1)
6

Consider Brand Colors Carefully

School brand colors may not always meet accessibility standards. Create accessible variations or use brand colors as accents with proper contrast alternatives.

Accessible Brand Usage
Brand blue used as accent with high contrast text
White text on dark brand blue (12.1:1)
Poor Brand Implementation
Light blue with brand blue text (2.1:1)
Light brand blue on white (1.9:1)

Color Blindness Considerations

Red-Green Color Blindness (8% of men, 0.5% of women)

Problematic: Red and green combinations

Better: Blue and red combinations

Use patterns, shapes, or text labels in addition to color

Blue-Yellow Color Blindness (Rare)

Difficulty distinguishing blue and yellow colors. Use high contrast and avoid blue-yellow combinations as the only differentiator.

Total Color Blindness (Very Rare)

Complete inability to see colors. Relies entirely on contrast, brightness, and non-color indicators like text and patterns.

Color Contrast Testing Tools

WebAIM Contrast Checker

Free online tool that tests color combinations and provides exact contrast ratios with WCAG compliance indicators.

Colour Contrast Analyser (CCA)

Desktop application by TPGi that includes eyedropper tool, batch testing, and color blindness simulation.

Stark (Figma/Sketch Plugin)

Design tool integration for real-time contrast checking and color blindness simulation during the design process.

WAVE Web Accessibility Evaluator

Browser extension that identifies contrast errors on live websites with detailed explanations and suggestions.

Color Oracle

Free color blindness simulator that shows how your screen appears to users with different types of color vision deficiency.

Accessible Colors

Web tool that suggests accessible color palettes and automatically adjusts colors to meet WCAG standards.

Practical Examples for Educational Content

Form Error Messages
✓ Accessible
⚠️ Error: Email field is required
Uses icon, text, color, and border (4.5:1 contrast)
✗ Poor
Email field is required
Color only, low contrast (1.8:1)
Assignment Status Indicators
✓ Accessible
✓ Completed
⏳ In Progress
⚠️ Overdue
✗ Poor
Completed
In Progress
Overdue
Navigation Links
✓ Accessible
Blue links with underlines (7.3:1 contrast)
✗ Poor
Light gray, no underlines (1.9:1 contrast)
Data Visualizations
✓ Accessible
Math: 85%
Science: 72%
High contrast colors with patterns and labels
✗ Poor
Color only, no labels, low contrast

Additional Color Contrast Best Practices

  • Test your color choices with actual users who have visual impairments
  • Create a color palette guide that includes accessible combinations for your brand
  • Use automated testing tools during development, but always verify manually
  • Consider providing high contrast mode options for users who need them
  • Test your content on different devices and screen types (mobile, tablets, projectors)
  • Ensure sufficient contrast for printed materials as well as digital content
  • Document your color choices and contrast ratios for consistency across materials
  • Train design and content teams on accessibility requirements and testing methods
  • Review and update color choices regularly as standards and tools evolve
  • Remember that good contrast benefits everyone, not just users with disabilities

ADA Compliance Contact

Lori Underwood

Email: [email protected]

Phone: (719) 426-8002

Hanover School District 28

WCAG 2.1 AA Compliant