E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Tom Livingston
Date: Thu, Sep 12 2019 9:08AM
Subject: Using high contrast styles in a site
No previous message | Next message →

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

From: glen walker
Date: Thu, Sep 12 2019 9:58AM
Subject: Re: Using high contrast styles in a site
← Previous message | Next message →

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 ADDRESS 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
> > > > >

From: Tom Livingston
Date: Thu, Sep 12 2019 11:24AM
Subject: Re: Using high contrast styles in a site
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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

From: Jonathan Avila
Date: Thu, Sep 12 2019 11:42AM
Subject: Re: Using high contrast styles in a site
← Previous message | Next message →

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

From: Tom Livingston
Date: Thu, Sep 12 2019 11:52AM
Subject: Re: Using high contrast styles in a site
← Previous message | Next message →

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 ADDRESS 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
>
>

From: glen walker
Date: Thu, Sep 12 2019 12:14PM
Subject: Re: Using high contrast styles in a site
← Previous message | No next message

Note that the subway feature gives better contrast (higher contrast), but
not necessarily "high contrast" as in 7:1 ratio. But that's mainly a
terminology thing.

Also, the "High Contrast" text for the switch does not have sufficient
contrast itself so it would not satisfy the G174 mentioned earlier. The
dark gray text on a light gray background has a contrast of 4.1:1.