ben,
@ben@a11y.info avatar

There was an interesting #accessibility question in the #11tyConf chat I wanted to surface.

Say your site styles are responding to the prefers-contrast: less media query. Must they still conform to the relevant 4.5:1 and 3:1 contrast ratios when the media query is active?

sarajw,
@sarajw@front-end.social avatar

@ben Ooo I didn't see that question - definitely a good one! Also a good one for actually testing with users.

ben,
@ben@a11y.info avatar

@sarajw I miiiight have made use of my work Teams to ask @scottohara. His take was that since prefers-contrast is an explicit user choice, then no, WCAG wouldn't require you to meet those contrast thresholds when the media query is active, so long as the default theme is totally conformant. That said, he thought it'd still probably be good to ensure text is still at least 3:1, since "less contrast" doesn't mean "text should be illegible."

sarajw,
@sarajw@front-end.social avatar

@ben @scottohara Nice!! Thanks for asking :)

yatil,
@yatil@yatil.social avatar

@ben @sarajw @scottohara Unsurprisingly, Scott is correct. 😃

Of course 3:1 and 4.5:1 is already at the “low contrast” end of the spectrum, so going much lower might not be useful. The idea is more that you look at high contrast colors >12:1 and lower their contrast.

heydon,
@heydon@front-end.social avatar

@yatil @ben @sarajw @scottohara Yeah, to me prefers-contrast: less maps to "Heydon stop making everything black and white"

sarajw,
@sarajw@front-end.social avatar

@heydon @yatil @ben @scottohara I love your style though! Lolol yeah maybe a few people might like a filter on it...

I mean, yes, with all of this contrast stuff, people can adjust their monitors etc., and I know many do.

But it's often a pain, several menus to click through, clunky buttons or weird joysticks, and laptop monitors often have less sliders available, or you have to go through a calibration wizard or something to access a gamma or contrast slider.

heydon,
@heydon@front-end.social avatar

@sarajw @yatil @ben @scottohara I think, for briefs.video, I'll use that media query and just a CSS brightness filter to soften all the whites.

Kilian,
@Kilian@mastodon.social avatar

@ben @sarajw @scottohara
Spotted that Q too and thought it was a really good question, thanks for looking into it!

Isn't it the case already that as long as a theme conforms, you're conformant as far as WCAG is concerned (which isn't a goal, i know)

sarajw,
@sarajw@front-end.social avatar

@Kilian @ben @scottohara ooh. But does it have to be the default one?

I keep meaning to fix some contrast fails on my site - instead of adjusting the theme, I uh, made a whole high contrast theme to toggle on and off.

ben,
@ben@a11y.info avatar

@Kilian @sarajw @scottohara There's a lot of really good back and forth on this at https://github.com/w3c/wcag/issues/2889, but it doesn't actually seem to have landed on any one direction.

Possible It Depends™️ factors include whether there's a "default" experience, and whether the site is purely keying off of OS/browser preferences or if it (also?) has a theme selector.

Generally, default experiences should conform, and changing themes should be easy and accessible.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • accessibility
  • DreamBathrooms
  • everett
  • InstantRegret
  • magazineikmin
  • thenastyranch
  • rosin
  • GTA5RPClips
  • Durango
  • Youngstown
  • slotface
  • khanakhh
  • kavyap
  • ngwrru68w68
  • tacticalgear
  • JUstTest
  • osvaldo12
  • tester
  • cubers
  • cisconetworking
  • mdbf
  • ethstaker
  • modclub
  • Leos
  • anitta
  • normalnudes
  • megavids
  • provamag3
  • lostlight
  • All magazines