1. Accessibility Basics Series: Use of Color
Presented by:
Eric Lyons
Director of Training
March 31, 2015

2. Users who are visually impaired Users who have color deficiencies
Overview
Introduction
People who are blind cannot see colors and need additional information provided when color is used for error indication
Older people may have a lower degree of color perception and not be able to determine which text is a link when underlining is not used
People who are color blind may not be able to differentiate between colors used in a chart
User Impact
Users who are blind
Users who are visually impaired
Users who have color deficiencies 2

3. Ensure text and images of text provide sufficient color contrast
Requirements
Ensure color is not the sole method of communicating information, selection, or indicating error messages
Ensure text and images of text provide sufficient color contrast 3

4. Color as Sole Method - Overview
Ensure color is not the sole means of communicating information, selection, or indicating error messages
When color alone is used, users who are blind or color blind may not be able to tell:
Which form fields are in error
Which form fields are required
Which items are selected
Which lines in a chart apply to an item
Which element is referred to in instructions 4

5. Color as Sole Method – Overview (cont.)
Non-compliant Example
Compliant Example
NOTE: WCAG allows for color to be used for links AS LONG AS the difference in link color and the text around it meets the WCAG color contrast requirements
Non-compliant Example
Compliant Example
Complete the survey and you will be eligible to win.
Complete the survey and you will be eligible to win. 5

6. Color as Sole Method - Examples
Non-compliant Example
Compliant Example Q1 Q2 Q3
East
4.3
2.4 2
West
2.5
4.4
South
3.5
1.8 3
North
4.5
2.8 5 6

7. Color as Sole Method – Examples (cont.)
Non-compliant Example
Compliant Example
<div id=”feedback" style="display: block;">Incorrect username/password</div>
CSS:
#response {
background: transparent url("../img/erroricon.png") no-repeat scroll left center; }
<div id=”feedbacknew" style="display: block;">
<img src=“../img/erroricon.png” alt=“Error”>Incorrect username/password</div>
Non-Compliant Example 1: CSS BG Image with no alternative text
Compliant Example 2: Static Image with appropriate alternative text 7

8. Indicating Selection – Non-Compliant Example
Non-Compliant Example (HTML)
<div id="navsub_container">
<ul class="navsub" role="navigation">
<li>
<a href="/index.php" title="Dashboard">...
</li>
<li class="current">
<a href="/public/standards/view_violations.php" title="Best Practices"> 8

9. Indicating Selection – Compliant Example
Compliant Example (HTML) - Solutions
<div id="navsub_container">
<ul class="navsub" role="navigation">
<li class="current ">
<a href="/index.php" title=”Best Practices - active">…
</li> 9

10. Indicating Selection – Compliant Example (cont.)
Compliant Example (HTML) - Solutions
<div id="navsub_container">
<ul class="navsub" role="navigation">
<li class="current ">
<a href="/index.php”>
<span class="current”>Best Practices</span>
<span class="accessibleAltText"> - Active</span>
</span>
</a>
</li>
Span class=“accessibleAltText” pushes the – Active text off-screen 10

11. Color as Sole Method - Implementation
Remember all implementation techniques must provide visual cues and be available without vision
On-screen Text equivalent
Required Field
<label for="fname">First name (required)</label>
Error text - add the word “Error:” before the error text
<h4>Error: address cannot be blank</h4>
Error Image
<img alt=“Error” src="error.jpg“ /> cannot be blank
Text cues
Required Field - add asterisk in addition to color
<label for=“fn”> <span class=“redLabel”>
*First name:</span></label>
<input type="text" id ="fn" /> 11

12. Color as Sole Method – Implementation (cont.)
Off-screen Text Equivalent
Page tabs or buttons with states
Title attribute (title="Administration Tab Selected")
Not announced by default for screen readers
Off-screen text with CSS
.scrnReader {position: absolute; left:-9999; width:1px; height:1px; overflow:hidden;}
Off-screen text will be rendered by assistive technology but will not be visible on-screen
Visual cues
Charts and graphs
Patterns
Links and selected page tabs
Underline or other attributes 12

13. Ensure that text and images of text provide sufficient color contrast
Contrast - Overview
Ensure that text and images of text provide sufficient color contrast
Insufficient color contrast prevents users with color deficiencies or low vision from reading and distinguishing content 13

14. Codepen Color Contrast Example
Contrast - Examples
Non-Compliant Example
Compliant Example
This page provides resources to supplement the training materials in this course.
This page provides resources to supplement the training materials in this course.
Codepen Color Contrast Example

15. Contrast – Implementation Techniques
The WCAG 2.0 level AA and proposed Section 508 Refresh compliance levels require a contrast ratio of:
3:1 or more for text of 18 points (14 points if bolded) or larger
4.5:1 or more for text of less than 18 points
Modify the foreground or the background color so that a sufficient contrast is attained
Use a color contrast checking tool
The AMP Toolbar’s Color Contrast Checker
Snook (Color Contrast Check Tool)
Color Contrast Video 15

16. Thank You Contact Us Follow Us Eric Lyons Kim Phillips @SSBBARTGroup
Kim Phillips
Follow Us
@SSBBARTGroup
linkedin.com/company /SSB-BART-Group
facebook.com /SSBBARTGroup
SSBBARTGroup.com/blog