Hi Contrast rendering

[bennypowers]

Brittany Huntzberry directed my attention to https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors

We should look into this for RHDS

[brittanyhuntzberry]

I did also see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast - and some good articles via Smashing Magazine:
https://www.smashingmagazine.com/2023/01/creating-high-contrast-design-system-css-custom-properties/
https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/
and https://adrianroselli.com/2021/02/whcm-and-system-colors.html

[bennypowers]

This is awesome.

So I don't think we'll be able to include this in things like our light-dark calls. What we could do is write into our element styles to restrict the colours that are used based on the contrast settings.

Conceptually speaking, it would be like saying, under high contrast settings, you can only choose either the darkest or the lightest colour palette, but you can't choose the intermediate ones.

I think there would be significant accessibility and usability issues to overcome there because we might use those intermediate colour palettes to convey some visual semantics, and those might be lost in a high contrast scenario.

So a comprehensive solution would probably involve using JavaScript to observe changes to those preferences and trigger changes to the internal structure of some of our elements depending on whether or not high contrast mode is engaged.

cc @marionnegp @adamjohnson @zeroedin