A presentation at BarCamp Philly 2020 by Todd Libby
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
A talk about the current state of color contrast on the web and a walkthrough why designers and developers should practice accessibility.
The following resources were mentioned during the presentation or are useful additional information.
An annual accessibility analysis of the top 1,000,000 home pages.
Key facts, definitions, and information on blindness and visual impairment.
This contrast checker attempts to visually demonstrate how readable color combinations are, for normal, italic, bold, or bold italic text of various sizes and font styles.
It’s a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.
This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.
Another contrast checker from WebAIM to test color compliance with the W3C Web Content Accessibility Guidelines (WCAG).
The WAVE Chrome and Firefox extensions allows you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers.
Accessibility checker for WCAG 2 and Section 508 accessibility. Find accessibility defects on your website or web application by using the axe extension.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible.
The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).
Sufficient and Advisory Techniques on how to meet WCAG 2.0 Visual Contrast requirements.
Jeffrey Zeldman, on Blue Beanie Day.
Report of the Special Rapporteur on the promotion and protection of the right to freedom of opinion and expression.
A11y is a right. NOT a privilege. T-shirt over at Cotton Bureau for sale to promote accessibility all over the world and the internet.
for free. You
can too.