Ask any accessibility leader about accessible colors and they’ll wince from the pain of struggling for a solution. Why is it so difficult to ensure your product meets WCAG 2.1 AA color contrast requirements? Ted Drake, Intuit’s Global Accessibility Leader, will explain the basics of color accessibility requirements. He will also talk about the conflict of overlapping requirements, dealing with brand colors, using color to denote hierarchy of information, and instances where adequate contrast impedes readability. You will have a better understanding of why accessible color usage is a journey and strategies for making continual progress. About the Speaker – Ted Drake Photo of Ted Drake Ted Drake is the Global Accessibility Leader for Intuit, a financial software company. Intuit’s small and centralized accessibility team has created a culture of inclusive development and design with more than 600 champions. Customer interviews and feedback is key to their development. Ted started working in accessibility almost 20 years ago, when he was the web site manager for the San Diego Museum of Art. He was also an early adopter of standards-based web development, which treated accessibility as core to engineering. While at Yahoo!, Ted was a front-end engineer, developer evangelist, and co-founded Yahoo’s Accessibility Lab. Ted’s benefited from ample International travel, including many trips to India and two years working out of Europe. Connect with Ted Drake on linkedin.

1. The Saga of Accessible Colors
Ted Drake, Intuit
Maxability Webinar, June 2020

2. Muwekma Ohlone People

3. Accessible Color Contrast
What is your reaction?

4. Color Contrast for
Designers

5. Color Contrast for
Developers

6. Color Contrast
for PMs

7. Color Contrast for
Users

8. 4.5:1 Battle Cry

9. WebAim 1 Million:
86.3% had low contrast text

10. Wave Errors
Wave & Axe Errors

11. Google has a white “.” with aria-hidden

12. YouTube
Copyright
is 3.19:1

13. 4.48:1
4.42:1

14. Automated Testing Doesn’t
Tell The Whole Story
* This is not an excuse to design with
inaccessible colors

15. Goals For Today
● Overlapping requirements
● Conflicting User Experiences
● Strategies for moving forward

16. Color Challenges
Call to Action Buttons

17. Readability vs. Actionable
Intuit uses Orange for primary call to action
Orange gets muddy at 4.5:1
Orange provides visual contrast against blue/black
typography.
Clear call to action
● Chemo Brain
● Low-vision
● Cognitive

20. White vs Black Text
The Myths of Color Contrast Accessibility
vs.
There is no “Myths of Color Contrast Accessibility”
White text vs Black Text can affect
Readability
So does using an accessible background

21. Placeholder text - Suggested value
● Light enough to differentiate with
pre-filled data
● Dark enough to read
Use descriptive string for important
details
Do not use as a label.

22. Visual Hierarchy
Size and Scale
Color and Contrast
Typographic Hierarchy
Spacing, Proximity, and Negative Space
Alignment
Repetition

23. Visual Hierarchy
Colors need to meet color
requirements on all backgrounds.

24. Overlapping Link Requirements
● Link to background: 4.5:1
● Link to body text: 3:1
● Link states need 4.5:1 and be distinct
This leaves a small spectrum of colors.
Normal: #3344dd
Hover/Focus/Active:
#bb1122
Visited: #884488
Body: #000000
Background: #FFFFFF

25. Don’t Depend on Color
● Underline inline links
● Visited link icon
a:visited:after {
content: " 2713 ";
}

26. Color Strategies

27. There’s more to
inclusive design
than color

28. I would like to suggest having an option to change the color of the text.
Right now the text is to light for me to read and really starting to strain
my eyes. If there is a way can you please let me know ASAP! Thank
you.
Working in quickbooks is killing my eyes. Can you make the fonts bolder and
easier to see ?
the font color is grey - there is not enough contrast to clearly see the rows of
numbers when one is staring at the screen all day.
the biggest problem i have your fonts on background are to light
COLOR ON QUICKBOOKS ONLINE TO WAY TOO LIGHT, CAN HARDLY
READ IT. HOW DO I MAKE IT DARKER?
Listen to your
customers!

29. Designers love grey

31. Obvious changes - Grey on Grey

32. That’s simply unreadable
Less than 2:1
Nothing should be below 2:1.
Even disabled elements.
2:1 to 3:1
Need justification (disabled, placeholder)

33. Start a conversation… Today!
3:1 to 4:1
Need to be updated (Heading?)
4:1 to 4.5:1
Why? Branding? Background color?

34. Today’s Action Items
● Automated testing is great, but doesn’t provide scale
● Prioritize below 3:1
○ Provide clear strategies to PM
● Listen to your customers
○ Prioritize their complaints
● Empower Inclusive Design
○ Don’t depend on color
○ Get involved early in color branding discussions
● Bring Designers and Engineers together.