the importance of color accessibility
DESCRIPTION
The Importance of Color Accessibility. Greg Kraus, North Carolina State University Wayne Dick, California State University, Long Beach. Agenda. Concepts Visual Impairment Simulator WCAG 2 Beyond WCAG 2 Contrast Testing Tools. Two questions we ask with color accessibility. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/1.jpg)
The Importance of Color Accessibility
Greg Kraus, North Carolina State University
Wayne Dick, California State University, Long Beach
![Page 2: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/2.jpg)
Agenda
• Concepts• Visual Impairment Simulator• WCAG 2• Beyond WCAG 2• Contrast Testing Tools
![Page 3: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/3.jpg)
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?
![Page 4: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/4.jpg)
Planning for color and visual deficiencies
• There are a wide range of color deficiencies and visual impairments
• How do we plan for them all?
![Page 5: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/5.jpg)
Visual Impairment Simulator
• NoCoffee• Chrome Extension
![Page 6: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/6.jpg)
NoCoffee Interface
![Page 7: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/7.jpg)
NoCoffee: Base Page
![Page 8: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/8.jpg)
NoCoffee: Protanopia
![Page 9: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/9.jpg)
NoCoffee: Light Blur
![Page 10: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/10.jpg)
NoCoffee: Heavy Blur
![Page 11: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/11.jpg)
NoCoffee: Macular Degeneration
![Page 12: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/12.jpg)
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
![Page 13: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/13.jpg)
WCAG 2 (1.4.1): Use of Color
• Examples of violations– “Required fields are in red”– “Complete the blue section first”
![Page 14: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/14.jpg)
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)
![Page 15: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/15.jpg)
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
![Page 16: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/16.jpg)
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%)
![Page 17: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/17.jpg)
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.
![Page 18: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/18.jpg)
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
![Page 19: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/19.jpg)
Application to Color
• Color Blindness– 3 types, accommodations conflict
• Retinitis Pigmentosa– Bright blue can cause damage
![Page 20: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/20.jpg)
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%.
![Page 21: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/21.jpg)
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
![Page 22: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/22.jpg)
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
![Page 23: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/23.jpg)
Colour Contrast Analyser
![Page 24: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/24.jpg)
Text Over Images
![Page 25: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/25.jpg)
Anti-Aliased Text
![Page 26: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/26.jpg)
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
![Page 27: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/27.jpg)
WAVE11
22
33
44
55
![Page 28: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/28.jpg)
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
![Page 29: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/29.jpg)
Color Contrast Analyzer
![Page 30: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/30.jpg)
Color Contrast Analyzer: Original Image
![Page 31: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/31.jpg)
Color Contrast Analyzer: Mask
![Page 32: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/32.jpg)
Color Contrast Analyzer: Text Over Images
![Page 33: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/33.jpg)
Color Contrast Analyzer: Text in Images
![Page 34: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/34.jpg)
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
![Page 35: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/35.jpg)
Sample Accessible Palette Evaluator
• Sample Accessible Palette Evaluator
![Page 36: The Importance of Color Accessibility](https://reader031.vdocuments.us/reader031/viewer/2022013011/5681348c550346895d9b73f6/html5/thumbnails/36.jpg)
Color Palette Tweaker
• Tanaguru• Web-based application• Pick two colors and adjust one of them to
make the contrast great enough to meet WCAG