search

ericwbailey / a11y-webring.club

🌐 A webring for digital accessibility practitioners.
https://a11y-webring.club/
MIT License
39 stars 87 forks source link

[Bug] Forced-colors and contrast #72

Closed Seirdy closed 1 year ago

Seirdy commented 1 year ago

What happened?

When using forced-colors, the icons (socials, previous, random, next) retain their dark-blue color. This can cause contrast issues for users, like myself, who use forced-colors with a dark color palette.

Operating systems

Fedora 37

Browsers

Firefox 110 (Developer Edition), official build

Anything else?

Here's a screenshot of the page as it appears to me:

The homepage's previous/random/next links, and the first two entries in the members list, with a dark theme and dark-blue icons. Icons for socials and prev/random/next have poor contrast against the almost black background..

One solution would be to respond to a prefers-colors: forced media query to color the SVGs with currentColor, giving them the same color as surrounding text.

To maximize compatibility, this could even be inverted: the default color could be currentColor, and a custom blue could only activate in response to prefers-contrast: no-preference or prefers-contrast: less. Ben Nadel uses a similar approach for reduced-motion: make the default the accessible version, and override it if possible.

Code of conduct

ericwbailey commented 1 year ago

Addressed via https://github.com/ericwbailey/a11y-webring.club/pull/76. Thank you for reporting this as well, Forced Colors Mode is something I'm really passionate about supporting.

I think we're getting bit by the weird state of currentColor/SVG. Here's how it looks in Edge current on Windows, links and buttons that use SVG are now mapped to Forced Colors Mode keywords:

The top of the webring showing improved Forced Color Mode support. Icons now match the link theme color, and the gradient background has been removed in favor the user's Forced Color Mode background color choice.