FIX Color Contrast - Accessibility in Web & UI Design

📄 Download the PDF Cheat Sheet: pmty.pe/color-contrast
Don’t make my mistake - Learn what’s crucial and required about color contrast for text and UI components for your next design project.
💌 Subscribe to the weekly Font Friday Newsletter:
pmty.pe/newsletter
💡 Typography Coaching Call
pmty.pe/coaching-call
🎥 Eric Egger’s KZbin Channel:
‪@yatil‬
Chapters:
0:00 Intro
1:18 Why web accessibility?
2:50 Color contrast for text
3:57 Color contrast for UI components
5:03 1 Add a border
6:03 2 Add additional signifiers
6:37 3 Consider the context
7:42 KZbin filters pass accessibility
8:44 KZbin search box fails
9:09 Action steps with color contrast
#accessibility #webdesign #typography

[@oksana_shabalina]

Love that! This video covered the gaps in my understanding of the accessibility topic. Thanks!

[@PimpmyType]

So happy to read that, Oksana! I’m glad it was helpful to you. Share it with others 😉

[@yatil]

Well done!

[@PimpmyType]

Thanks so much for participating, Eric! Really appreciate your wisdom and friendly way of sharing it!

[@BrunoPulis]

Excellent content ❤

[@PimpmyType]

Thank you, Bruno!

[@welling1]

Wow, I had no idea you could get around the background color rule via context hints. I'd always wondered how some very big companies where getting away with horrible contrast on some of their content (of course, not all of them can be excused via "context hint")

[@PimpmyType]

Right, Ian? It did not make sense to me either, that’s why I talked to Eric and Mike.

[@myndexresearch]

Keep in mind that in an automated survey of 1 million websites, some 860,000 of them failed contrast...

[@BrennanYoung]

There's another argument for adding borders to controls: Windows High Contrast Mode (HCM) draws ALL borders, even if they are styled as "transparent", it also draws the border in a different (user-definable) color, depending on certain UI state attributes (such as disabled). Last time I checked it ignored ARIA equivalents such as aria-disabled. High Contrast features (such as, but not restricted to Windows HCM) are among the most commonly used assistive technologies, popular even with those who don't identify as disabledm, so it is wise to test your content in this mode. Check also that focus indicators, option selections, radiobuttons and checkboxes display state correctly at High Contrast, especially if you have used non-default styles for these elements. Use borders on controls. Always. If you don't want the borders to be visible under default visual presentation, set the border color to transparent, and be mindful of the advice given in this video about the background color. In SVG the same goes for stroke/fill.If it's operable, give it a border. Yes, there's no WCAG requirement to support Windows HCM, but if UI state information is lost in that mode (e.g. distinction between disabled/enabled, checked/unchecked or toggled/not) then you probably have an Info and Relationships violation. In Understanding WCAG SC 1.3.1 under "intent" there is the requirement "information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes"

[@PimpmyType]

Thanks for adding that thoughtful and helpful tip, Brennan! Another great aspect.

[@Brunolinard]

Some companies then using plain text as a button after questioning reported that it is a new standard.

[@PimpmyType]

😳😳

[@SebastianGansrigler]

haha oliver bester mann

[@PimpmyType]

Danke, Sebastian! ❤ Es war eine Freude, dieses Video zu machen. I went so deeeep 😂.

[@myndexresearch]

Unfortunately, WCAG 2 contrast has a number of problems, among them, it is not perceptually uniform so for instance in dark mode, you could "pass" WCAG 2 yet be completely unreadable, even for standard vision. There was never any peer review nor any empirical testing for these old standards. The non-text 1.4.11 SC has no scientific peer-reviewed support, nor testing, and is essentially self-referential to an unfinished, error ridden document, and some informal emails. THE POINT: don't assume that "meeting" WCAG 2 makes things accessible. Over the last 10-15 years, we've seen a reduction in readability contrast as sites shifted from good contrast to the very low bar that WCAG 2 promotes. Don't rely on WCAG 2 contrast as the measuring stick for for visual accessibility.

[@PimpmyType]

I agree, and I hope that it came across that these should be minimum standards pointing you in a good direction. Not exact rules.

[@waldschratler]

DoubleUCAG 🤓

[@PimpmyType]

I don’t get it 😂

[@martinbenjamin1896]

They can't keep getting away with it!!!

[@PimpmyType]

Haha, never!!