search

Access4all / adg

Accessibility Developer Guide
http://www.accessibility-developer-guide.com
Other
191 stars 39 forks source link

[Content suggestion] High Contrast Mode #156

Open backflip opened 6 years ago

backflip commented 6 years ago

Windows High Contrast Mode is a test criterium for Access for All. So we should document what this results in.

AndreasMoesch commented 5 years ago

Taking over this topic. It relates to Colours and Contrast which is also on my plate.

jmuheim commented 4 years ago

@AndreasMoesch Is there any update on this?

Thinking about it, it would be great to find out, what exactly happens when Win HCM is activated. As far as I can tell, some CSS attributes are treated as purely decorative (like background-color or text-shadow) and thus removed by HCM, while others are treated as kinda meaningful (border) and applied with very high contrast styles.

I'm not sure how Win HCM exactly relates to the WCAG. Would be worth to investigate this deeper first.

Could also be cool to have a bookmarklet which has the same effect as Win HCM.

jmuheim commented 4 years ago

According to https://www.golem.de/news/mozilla-firefox-73-bietet-nextdns-fuer-doh-und-mehr-barrierefreiheit-2002-146572.html, Firefox 73 now keeps displaying background-images when Win-HCM is active. This adds further non-homogeneity to the topic in general...

mirodietiker commented 2 years ago

Today, HCM was a topic at the accessibility call.

Additionally, this corresponds to dark themes that today more and more people are using dark modes. Some stats about the popularity here: https://medium.com/dev-channel/let-there-be-darkness-maybe-9facd9c3023d

It seems to me all conceptual improvements to dark mode will similarly apply to HCM.

This post about Windows HCM also came up: https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

A documentation page should / could provide best practices to support both.

mirodietiker commented 2 years ago

For those who are not so familiar with each ADG page, here we have an intro to HCM: https://www.accessibility-developer-guide.com/setup/helper-tools/high-contrast-mode/

This likely should be connected to the related examples / bestpractices.

renestalder commented 2 years ago

A small additional hint: Since this ticket was created, we also have prefers-contrast.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast

And here is also another bunch of valuable information of other media queries.

https://adrianroselli.com/2021/02/whcm-and-system-colors.html

jmuheim commented 1 year ago

We also have @media (forced-colors: active) now:

https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast