Contrasting Accessibility with Color Contrast

A presentation at BarCamp Philly 2020 in December 2020 in by Todd Libby

Slide 1

Slide 1

Contrasting Accessibility with Color Contrast @toddlibby https://toddl.dev 1

Slide 2

Slide 2

Who Am I? Web Developer & Designer, over 21 years in the industry, front and back end, design and Accessibility. W3C Silver Community member. Visual Contrast of Text subgroup member. 2

Slide 3

Slide 3

I also love lobster rolls. 🦞 3

Slide 4

Slide 4

4

Slide 5

Slide 5

Accessible Color Contrast 5

Slide 6

Slide 6

“Mix up a little more shadow color here, then we can put us a little shadow right in there. See how you can move things around? You have unlimited power on this canvas — can literally, literally move mountains” ― Bob Ross 6

Slide 7

Slide 7

Bob Ross Painter, art instructor, TV host 7

Slide 8

Slide 8

“We don’t make mistakes; we just have happy accidents.” — Bob Ross 8

Slide 9

Slide 9

9

Slide 10

Slide 10

“juxtaposition of dissimilar elements (such as color, tone, or emotion) in a work of art.” — Merriam-Webster Dictionary - https://www.merriam-webster.com/dictionary/contrast 10

Slide 11

Slide 11

Why color contrast? 11

Slide 12

Slide 12

What is the number one common failure in sites today regarding accessibility? 12

Slide 13

Slide 13

WebAIM Million Report Most Common WCAG Failures 13

Slide 14

Slide 14

14

Slide 15

Slide 15

15

Slide 16

Slide 16

Who are we failing? 16

Slide 17

Slide 17

According to the World Health Organization (WHO): •Globally, at least 2.2 billion people have a vision impairment or blindness, of whom at least 1 billion have a vision impairment that could have been prevented or has yet to be addressed. •Of these 1 billion people, this includes those with moderate or severe distance vision impairment or blindness due to unaddressed refractive error, as well as near vision impairment caused by unaddressed presbyopia. •Globally, the leading causes of vision impairment are uncorrected refractive errors and cataracts. •The majority of people with vision impairment are over the age of 50 years. World Health Organization:, www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment 17

Slide 18

Slide 18

“I know our customer base and we do not have disabled users.” — Stakeholder and VP of Company 18

Slide 19

Slide 19

“…the change in the appearance of a colour surrounded by another colour; for example, grey looks bluish if surrounded by yellow.” — Dictionary.com - https://www.dictionary.com/browse/colour-contrast 19

Slide 20

Slide 20

20

Slide 21

Slide 21

21

Slide 22

Slide 22

Seven Types of Color Blindness: Protanomaly and Deuteranomaly Protanopia and Deuteranopia Red-green color blindness. Blue-yellow color blindness. Tritanomaly and Tritanopia Complete color blindness. Monochromacy Other Visual Impairments: Hypermetropia, Myopia, Cataracts, Glaucoma, Stargardt’s, Traumatic Iritis 22

Slide 23

Slide 23

Traumatic Iritis Traumatic iritis is inflammation of the iris due to trauma. Inflammation of the iris may cause synechial formations between the inflamed, miotic iris and anterior lens. Simply put the lens and iris in my eye were inflamed and pressed against each other. Steroids (drops 2x/day) and pill (1x/ day) to treat my case. 23

Slide 24

Slide 24

24

Slide 25

Slide 25

Lea Verou’s Color Contrast Checker - https://contrast-ratio.com 25

Slide 26

Slide 26

Who Can Use: https://whocanuse.com 26

Slide 27

Slide 27

MORE! • WCAG Contrast Checker: https://contrastchecker.com • WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker • ColourContrast: https://colourcontrast.cc • RandomA11y: https://randoma11y.com 27

Slide 28

Slide 28

Browser Extensions 28

Slide 29

Slide 29

• WAVE: https://wave.webaim.org/extension • Axe: https://www.deque.com/axe • Firefox & Chrome DevTools 29

Slide 30

Slide 30

Firefox Vision Simulator • • • This feature depends on webrender, an experimental feature that is not enabled by default on all platforms about:config to force-enable the webrender Set the preference gfx.webrender.all to true using the Firefox Configuration Editor 30

Slide 31

Slide 31

Chrome DevTools • This feature is built-in • No config required • Toggle the element on the page to enable modal 31

Slide 32

Slide 32

WCAG Web Content Accessibility Guidelines https://www.w3.org/TR/WCAG21/ 32

Slide 33

Slide 33

Contrast Ratio WCAG 2.0 • Success Criterion 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) • Large Text: Large-scale text and images of large-scale text have a contrast ratio of 3:1 • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html 33

Slide 34

Slide 34

How to Meet WCAG 2.0 Success Criterion (SC) • Situation A: text is < 18 point (24 px) if not bold and < 14 point (18.666666666666664 px). • Situation B: text is at least 18 point if not bold and at least 14 point if bold. https://www.w3.org/WAI/WCAG20/quickref/20160105/#visual-audio-contrast-contrast 34

Slide 35

Slide 35

Contrast 3 • New calculations of contrast based on more modern research on color perception. • Merging the 1.4.3 AA and 1.4.6 AAA levels into one guideline. • New test of text contrast. • At this time, it only includes textual visual contrast. 35

Slide 36

Slide 36

36 Photo by Dex Ezekiel on Unsplash

Slide 37

Slide 37

37

Slide 38

Slide 38

What?! 38

Slide 39

Slide 39

39

Slide 40

Slide 40

Video Captioning 40

Slide 41

Slide 41

This is a lobster roll. They are delicious! They are the best food in the entire world and I love to eat them! 41

Slide 42

Slide 42

Video Captions “Readability is the most important aspect of captioning in video. No other rules matter if captions cannot be read.” — Meryl K. Evans 42

Slide 43

Slide 43

This is a lobster roll. They are delicious! They are the best food in the entire world and I love to eat them! 43

Slide 44

Slide 44

“Make sure text stands out from the background and any distractions.” — Meryl K. Evans 44

Slide 45

Slide 45

What Can We Do? 45

Slide 46

Slide 46

• Test with persons w/visual impairments. • Hire people with disabilities! • Make a11y inclusive in the design & development process from the start. • Be sensible with colors and color palettes. • Use the tools! 46

Slide 47

Slide 47

“…our industry as a whole thinks less and less about accessibility (not that we ever had an A game on the subject), and talks less and less about progressive enhancement, preferring to chase the ephemeral goal posts of overengineered solutions to non-problems.” — Jeffrey Zeldman https://www.zeldman.com/2019/12/01/bluebeanieday2019/ 47

Slide 48

Slide 48

“The Special Rapporteur underscores the unique and transformative nature of the Internet not only to enable individuals to exercise their right to freedom of opinion and expression,” according to the report’s summary, “but also a range of other human rights, and to promote the progress of society as a whole.” — United Nations https://www2.ohchr.org/english/bodies/hrcouncil/docs/17session/A.HRC.17.27_en.pdf 48

Slide 49

Slide 49

A11y is a right. NOT a privilege. — Me🦞 https://cottonbureau.com/products/a11y-is-a-right#/5254643/ 49

Slide 50

Slide 50

Thank You! https://toddl.dev @toddlibby 50