Contrasting Accessibility with Color Contrast

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

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

I also love lobster rolls. 🦞 3

4

Accessible Color Contrast 5

“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

Bob Ross Painter, art instructor, TV host 7

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

9

“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

Why color contrast? 11

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

WebAIM Million Report Most Common WCAG Failures 13

14

15

Who are we failing? 16

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

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

“…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

20

21

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

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

24

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

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

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

Browser Extensions 28

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

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

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

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

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

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

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

36 Photo by Dex Ezekiel on Unsplash

37

What?! 38

39

Video Captioning 40

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

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

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

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

What Can We Do? 45

• 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

“…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

“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

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

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