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")
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"
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.
![Basics of Accessibility in UI Design - Color Contrast Ratios! [Figma Tutorial]](http://i.ytimg.com/vi/mp1PfL3m_hI/mqdefault.jpg)
Love that! This video covered the gaps in my understanding of the accessibility topic. Thanks!
So happy to read that, Oksana! I’m glad it was helpful to you. Share it with others 😉
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")
Right, Ian? It did not make sense to me either, that’s why I talked to Eric and Mike.
Keep in mind that in an automated survey of 1 million websites, some 860,000 of them failed contrast...
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"
Thanks for adding that thoughtful and helpful tip, Brennan! Another great aspect.
Well done!
Thanks so much for participating, Eric! Really appreciate your wisdom and friendly way of sharing it!
Excellent content ❤
Thank you, Bruno!
OK I've never seen this before. When you mentioned pressing the low contrast like-button it got an animated rainbow border.
it is from youtube, when the word like, subscribe articulate then the assoiciate buttons animates
Back then the design of UA-cam was different with the button being light gray 😉.
Some companies then using plain text as a button after questioning reported that it is a new standard.
😳😳
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.
I agree, and I hope that it came across that these should be minimum standards pointing you in a good direction. Not exact rules.
haha oliver bester mann
Danke, Sebastian! ❤ Es war eine Freude, dieses Video zu machen. I went so deeeep 😂.
They can't keep getting away with it!!!
Haha, never!!
DoubleUCAG 🤓
I don’t get it 😂