the importance of color accessibility n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
The Importance of Color Accessibility PowerPoint Presentation
Download Presentation
The Importance of Color Accessibility

Loading in 2 Seconds...

play fullscreen
1 / 36
jordan-morrow

The Importance of Color Accessibility - PowerPoint PPT Presentation

123 Views
Download Presentation
The Importance of Color Accessibility
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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 • Given moderate visual acuity loss, can a person read this content without the aid of assistive technologies? • 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 3 2 5 4

  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 • 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