The Saga of Accessible Colors

Editor's Notes

1. “I want to respectfully acknowledge the Muwekma Ohlone People, who have stewarded this land (San Francisco Bay Area) throughout the generations.”
2. 85% of pages have low contrast as determined by automated testing This was the analysis done by the WebAim 1 million. It’s a scary number, but is it as bad it sounds? https://cdn2.hubspot.net/hubfs/5626219/SOAR%20/Diamond_SOAR_Report_2019.pdf?__hstc=140961197.4eb6f7e11830026693b0ccb50273d9a7.1575437116231.1588716534477.1588954148196.56&__hssc=140961197.1.1588959683100&__hsfp=3483602598&hsCtaTracking=f910bb7d-ac2b-4ee1-ba92-dc408fc5e819%7C27a2fc5b-e0ad-4bd7-9aa4-3c00abd9867e https://webaim.org/projects/million/#contrast
3. Intuit home page 6 errors with Wave 2 errors with Axe The white on blue errors are probably triggered by an opacity transition when the page loads. The second section is caused by placing white text on a grey background and lazy-loading the dark image.
4. Google.com has two contrast errors with Wave, for having a white . on a white background. But this is also using aria-hidden and is probably some kind of tracker.
5. QQ has lots of color contrast issues Axe: 67 Wave: 81 Most of them are 4.42:1 instead of 4.5:1. The difference is not visible There are still a lot of issues
6. Call to Action buttons
7. Warm colors, such as orange advance on the screen Cool colors, such as blue recede on the screen. This is one reason why orange call to action buttons have great strength https://sites.google.com/site/scienceofcolour/how-colors-advance-and-recede-in-art
8. https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/ And rebuttal https://www.creativejuiz.fr/blog/en/user-experience/there-is-no-myths-of-color-contrast-accessibility by Geoffrey Crofte There are problems with
9. https://visme.co/blog/visual-hierarchy/ Size and Scale. Color and Contrast are appropriate in this talk Larger text can have lower contrast (3:1) and still be readable Lower contrast and lighter colors can differentiate primary and secondary content Sometimes a link color is good in the primary section, but misses 4.5:1 in the secondary content (footer)
10. https://visme.co/blog/visual-hierarchy/ Size and Scale. Color and Contrast are appropriate in this talk Larger text can have lower contrast (3:1) and still be readable Lower contrast and lighter colors can differentiate primary and secondary content Sometimes a link color is good in the primary section, but misses 4.5:1 in the secondary content (footer)
11. Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.” https://webaim.org/blog/wcag-2-0-and-link-colors/ Normal: #3344dd Hover/Focus/Active: #bb1122 Visited: #884488
12. a:visited:before { content: "\2713 "; } https://css-tricks.com/put-checkmarks-next-to-visted-links-with-pure-css/
13. Don’t alienate your design teams by only focusing on color. That is just one aspect of inclusive design and you risk alienating them. Especially when limited to an official color palette. Focus on empowering designers to consider the full spectrum of inclusive design and make yourself a resource, not a thorn in their side.
14. The first step is to look at what your customers are saying. Sarah Margolis-Greenbaum shows how to search your voice of customer channel to find important feedback https://blogs.intuit.com/blog/2020/04/28/how-to-find-valuable-accessibility-feedback-in-slack/
15. How do I convince my boss that grey font is legible https://graphicdesign.stackexchange.com/questions/81583/how-do-i-convince-my-boss-that-grey-font-is-legible https://www.sitepoint.com/community/t/why-are-so-many-sites-using-gray-text/4667 http://xahlee.info/js/web_design_gray_on_white.html https://uxmovement.com/content/why-your-gray-text-should-never-exceed-46-brightness/ https://www.wired.com/2016/10/how-the-web-became-unreadable/ https://askleo.com/coping-with-gray-text/