WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using high contrast styles in a site

for

From: Tom Livingston
Date: Sep 12, 2019 11:52AM

Is there a media query for contrast? One that would attempt to honor a
users preference setting?

I'm guessing implementing your own would be, say, a switch that adds a
body class that if present uses a different color palette and/or
increases contrast with regard to images?

On Thu, Sep 12, 2019 at 1:42 PM Jonathan Avila
< <EMAIL REMOVED> > wrote:
>
> That particular switch actually has the affect of making some white text within images darker. In particular the white text that is part of the images becomes gray and lighter when the mode is applied as the feature is making the images darker. It makes seeing the food in the images more difficult for people with contrast sensitivity. It does increase contrast of text many other places and this method can meet the requirements if implemented correctly. This feature sort of blurs the line between "sufficient contrast" and "enhanced contrast" in terms of what it attempts to do. The best solution is to build in sufficient contrast and then if desired add in options for increased contrast, low contrast, and high contrast. Ideally a lot of this would be handled by browsers and platforms -- but unfortunately it's often hard to pick up the users platform settings and translate those into changes on the page.
>
> Jonathan
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Tom Livingston
> Sent: Thursday, September 12, 2019 1:25 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Using high contrast styles in a site
>
> CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
>
>
> Thank you for the information. The site that was shown to me was:
>
> https://www.subway.com/en-us
>
> And I'm thinking this isn't true high contrast. In most cases their idea of high contrast is questionable.
>
> Thanks again for the info. If others have additional info, keep it coming! I appreciate it!
>
>
> On Thu, Sep 12, 2019 at 11:59 AM glen walker < <EMAIL REMOVED> > wrote:
> >
> > Technically, you are allowed to have a low contrast page by default as
> > long as there's a widget on the page to switch to minimally passing
> > contrast colors as long as the widget itself has sufficient contrast by default.
> > See the "sufficient technique" G174 -
> > https://www.w3.org/WAI/WCAG21/Techniques/general/G174
> >
> > However, even though that is allowed, I would not encourage it. If
> > your default page passes all contrast minimums except for a few spots
> > on the page, then maybe having a widget might be ok, but strive to
> > have as much of the page satisfy the contrast as possible.
> >
> > Your specific question talked about "high contrast". This might be a
> > terminology thing but "high contrast" is typically a AAA requirement
> > of having a minimal contrast ratio of 7:1. The AA requirement is to
> > have a contrast of 4.5:1. But I'm thinking you were using the term
> > "high contrast" to just mean a larger contrast than the default page.
> >
> > Having a true "high contrast" (7:1) feature is a great thing to have
> > and goes beyond what is required by AA. For those that are curious,
> > an example of a high contrast feature can be found on the State of
> > California website, https://www.ca.gov/. There's a "settings" menu
> > near the top of the page and when you expand it, there's a "high
> > contrast" option that uses mostly yellow text on a black background
> > (although embedded social media content doesn't seem to be affected).
> >
> >
> > On Thu, Sep 12, 2019 at 9:09 AM Tom Livingston < <EMAIL REMOVED> > wrote:
> >
> > > Hello list,
> > >
> > > A coworker found an example on a website where a user could switch
> > > the site to use a high contrast mode. Does having a high contrast
> > > mode on a web site allow for the creation of content that initially
> > > doesn't pass color contrast tests?
> > >
> > > For example, if a brand color doesn't pass contrast tests, could it
> > > still be used as is in the 'normal' version of the site but then
> > > altered to pass in a high contrast mode (via css). Is this treatment
> > > acceptable from an accessibility stand point?
> > >
> > > I am looking for factual information to be able to use against this
> > > type of thing as it doesn't feel right to me personally, but if this
> > > type of thing is acceptable then I need to be able to tell designers
> > > I work with that they need to always plan for a high contrast mode.
> > >
> > > Any help would be appreciated.
> > >
>
> --
>
> Tom Livingston | Senior Front End Developer
>
> #663399
> > > > > > > --

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399