1. The Importance of Color Accessibility Greg Kraus, North Carolina State University Wayne Dick, California State University, Long Beach

2. Agenda Concepts Visual Impairment Simulator WCAG 2 Beyond WCAG 2 Contrast Testing Tools

3. Two questions we ask with color accessibility 1.Given moderate visual acuity loss, can a person read this content without the aid of assistive technologies? 2.If a person needs an assistive technology, does our content prevent them from modifying the content to meet their needs?

4. Planning for color and visual deficiencies There are a wide range of color deficiencies and visual impairments How do we plan for them all?

5. Visual Impairment Simulator NoCoffee Chrome Extension

6. NoCoffee Interface

7. NoCoffee: Base Page

8. NoCoffee: Protanopia

9. NoCoffee: Light Blur

10. NoCoffee: Heavy Blur

11. NoCoffee: Macular Degeneration

12. Standards: Taking the guessing out of conformance WCAG 2 – Color is not the sole means of conveying information – Provide sufficient contrast based on the size of the text and the conformance level desired

13. WCAG 2 (1.4.1): Use of Color Examples of violations – “Required fields are in red” – “Complete the blue section first”

14. WCAG 2 (1.4.3 and 1.4.6): Contrast Level AA and Level AAA Conformance Ratios – 3:1 minimum acceptable contrast for standard text and vision – 4.5:1 accounts for moderately low visual acuity (vision loss equivalent to approximately 20/40) typical visual acuity of people at roughly age 80 – 7:1 accounts for users who typically do not depend on assistive technologies for visual impairments (vision loss equivalent to approximately 20/80)

15. What Is Covered in WCAG Contrast Requirements? Text Does NOT apply to – Logos – Inactive form elements – Purely decorative text – Incidental text in photos – Other UI elements

16. WCAG 2 Conformance Levels and Ratios Level AA – 18 pt. or 14 pt. bold 3:1 – Smaller, 4.5:1 Level AAA – 18 pt. or 14 pt. bold 4.5:1 – Smaller, 7:1 18pt (1.5em, 150%) 14pt (1.2em, 120%)

17. There is no average person with low vision 35+ critical structures in the human visual system Multiple ways these structures can break Visual acuity, field loss and color perception are the formal metrics of low vision, BUT They neither detect nor predict the impact of low vision on life.

18. Application to Contrast Contrast is about differences in brightness If you want high contrast then the text is bright and the background is dark or visa versa. Bright light is painful to many people with low vision

19. Application to Color Color Blindness – 3 types, accommodations conflict Retinitis Pigmentosa – Bright blue can cause damage

20. What to do: Create flexible content Use 3:1 and 4.5:1 contrast ratio as advised. Drop the illumination on the screen and see how dark you can get and keep text is readable. Practice strict separation of presentation from content Anticipate users changing your color scheme. Provide text enlargement with reflow to 300%.

21. What text resizing have to do with contrast? To accommodate a disability with no average person, you must be flexible. A page that enlarge gracefully has a high degree of flexibility. The better you ensure flexibility the better you enable individual needs for low vision: color, size, spacing, special formatting

22. Eyedropper Tools Colour Contrast Analyser Desktop application for Windows and OS X Strengths – Can choose any colors on the screen Weaknesses – Anti-aliasing of text – Text over a non-uniform background – Must manually check elements

23. Colour Contrast Analyser

24. Text Over Images

25. Anti-Aliased Text

26. Automated Tools WAVE Web-based tool Strengths – Automatically checks all color combinations – Can account for text size Weaknesses – Text over images – Text in images – Text over CSS3 gradients

27. WAVE 1 1 2 2 3 3 4 4 5 5

28. Image Analysis Color Contrast Analyzer for Chrome Chrome extension Strengths – Checks the page as it is rendered Weaknesses – Cannot differentiate between text and other user interface elements

29. Color Contrast Analyzer

30. Color Contrast Analyzer: Original Image

31. Color Contrast Analyzer: Mask

32. Color Contrast Analyzer: Text Over Images

33. Color Contrast Analyzer: Text in Images

34. Testing Color Palettes NC State Accessible Color Palette Evaluator Web-based application Build a color palette Compare all of the color combinations to see which have enough contrast

35. Sample Accessible Palette Evaluator

36. Color Palette Tweaker Tanaguru Web-based application Pick two colors and adjust one of them to make the contrast great enough to meet WCAG