WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast Control Option

for

From: Cliff Tyllick
Date: Jan 10, 2015 1:04AM

Jordan, I think Karl stopped short of giving you a complete answer. Yes,
the user needs a fix that works on every site, not just on your site. But
here's the rest of that answer: that fix is available through the user's
operating system, browser, or both. You may concoct your own high-contrast
scheme, but by using the native schemes they can have the same experience
on every site.

And we wouldn't expect every user to have one, but each user can set up a
stylesheet that presents the text as they need it, regardless of how you've
designed it. Frankly, I think no one with low vision should leave a
rehabilitation or life skills training program without a personal
stylesheet that works for them and the knowledge of how to use it in at
least one browser. But I digress.

The point is, you shouldn't re-create what the operating system, user
agent, or both already provide. At least that's the tough love approach,
which seems better to me in this case.

By the way, if you explicitly set the background color in your CSS, that
makes it easier for folks to change the color scheme to meet their own
needs. One colleague of mine continually complains about sites that have no
background color set but rely on a background image. To read the content,
he must turn off the images and reverse the color scheme. When he does,
if the background color isn't explicitly set to white, it doesn't change to
black with his setup. So he's stuck looking at white on white. I haven't
played with it enough to fully understand the issue, so just regard this as
my passing on a friend's plea that all sites set a value for the background
color in their CSS, even if that value is #ffffff.

What the two Pauls said is also valid, but this is another point to keep
in mind.

Cliff Tyllick

On Tuesday, January 6, 2015, Paul Bohman < <EMAIL REMOVED> > wrote:

> I think Jordan is referring to color schemes in general and not just for
> logos and decorative text, but Paul is right that logos are given a pass
> even if they don't meet contrast guidelines.
>
> One way to reconcile brand colors and accessible contrast is to use the
> correct brand color for a section of the background, but to use a gradient
> to fade it either lighter or darker (depending on the original color) right
> before that background is placed behind text. So the overall effect shows
> your brand colors, but in the places where text is laid over the brand
> colors, the contrast is enhanced slightly to meet guidelines.
>
> Other little tricks that may or may not apply to your situation would be to
> use outlines or shadows around objects.
>
> Or darken the text if the branded background color is too dark for your
> branded text color. I think the color of the text would be less important
> for branding purposes than the color of the background, in most cases.
>
> It's hard to make more specific recommendations than this without seeing
> the design, but with some creativity, most brand colors can be adapted to
> meet color contrast guidelines by just being careful how and where the
> brand colors are implemented.
>
>
> Paul Bohman, PhD
> Director of Training
> Deque Systems, Inc
> www.deque.com
> 703-225-0380, ext.121
>
> On Mon, Jan 5, 2015 at 12:16 PM, Paul J. Adam < <EMAIL REMOVED>
> <javascript:;>> wrote:
>
> > WCAG allows you to keep low contrast in logos and decorative text. The
> > main body text and the navigation text should really have good contrast
> by
> > default. Older users need it, low vision users, people on bad monitors,
> > outdoors looking at your phone screen in the sun, tons of reasons why
> > contrast affects everyone.
> >
> > I'd put the good contrast setting as default and "Low Contrast" button as
> > the option ;)
> >
> >
> > Paul J. Adam
> > Accessibility Evangelist
> > www.deque.com <http://www.deque.com/>;
> > > On Jan 5, 2015, at 11:04 AM, Jordan Wilson <
> <EMAIL REMOVED> <javascript:;>>
> > wrote:
> > >
> > > Good points Karl,
> > >
> > > What would you consider as an alternative?
> > >
> > > We're trying to meet WCAG 2.0 A & AA, but our brand colors aren't quite
> > > compatible.
> > > As I see it our two options (if we want to meet the standard) are
> either:
> > >
> > > 1. Making the whole site contrast compatible (but not on brand)
> > >
> > > or
> > >
> > > 2. This option where by default we have good (but not to standard)
> > > contrast (that is on-brand) and we provide an easy option to switch to
> a
> > > high contrast stylesheet that is to standard.
> > >
> > > Option 1 was unpopular w/ the brand police, option 2 seemed to make
> > > everyone happy.
> > >
> > >
> > > Is there something else we should consider?
> > >
> > >
> > > On 1/5/15, 11:22 AM, "Karl Groves" < <EMAIL REMOVED> <javascript:;>>
> wrote:
> > >
> > >> Jordan,
> > >>
> > >> It might be worth considering for a moment who needs a feature like
> > this.
> > >> Low contrast is an issue for people with color vision problems and
> > >> people with low vision. Low vision often isn't merely a case of low
> > >> visual acuity but may rather be a manifestation of certain eye
> > >> disease, making enhanced contrast even more important.
> > >>
> > >> High contrast, such as what you're suggesting, benefits those users.
> > >> But I don't believe in site-specific assistive technology like this.
> > >> If someone *needs* high contrast, they need it not only on your site,
> > >> but every site they visit as well as every other application they use
> > >> on their device.
> > >>
> > >>
> > >> On Mon, Jan 5, 2015 at 10:30 AM, Jordan Wilson
> > >> < <EMAIL REMOVED> <javascript:;>> wrote:
> > >>> We are currently planning a site and one of the options we¹ve chosen
> to
> > >>> implement is a High Contrast control in accordance with WCAG 2.0
> > >>> Technique
> > >>> G174
> > >>>
> > >>> This allows us some greater design/color flexibility for the site
> which
> > >>> we
> > >>> were having difficulty with because the brand colors are slightly
> under
> > >>> contrast. I wanted to ask the list if they had any suggestions or
> > >>> cautions
> > >>> on implementing this technique.
> > >>>
> > >>> You can see examples of the technique at these two sites:
> > >>> http://www.mills-peninsula.org/accessibility.html
> > >>>
> > >>> http://www.northeastmedicalgroup.org/
> > >>>
> > >>>
> > >>> The High Contrast button is in the top right of both pages, selecting
> > it
> > >>> changes all CSS colors in the site to a separate high contrast
> version
> > >>> (the same site, just different CSS)
> > >>>
> > >>> To make sure that our High Contrast option is accessible to users, we
> > >>> thought to implement four considerations:
> > >>>
> > >>> 1. Ensure the switch control is a prominent, permanent and high
> > contrast
> > >>> element on the page.
> > >>> 2. Place the control toward the beginning of the tab order so that
> > >>> keyboard users will find it efficiently
> > >>> 3. Feature the option on the site accessibility page, so that users
> are
> > >>> aware of it and understand how to use it.
> > >>> 4. Cookie the setting, so that users who enable it default to High
> > >>> Contrast on return visits.
> > >>>
> > >>> Are there any opinions of users out there about implementing this
> > >>> technique? Does anyone have experience / recommendations for
> > >>> implementing
> > >>> it properly?
> > >>>
> > >>> Here¹s the link to the WCAG description of the technique:
> > >>> http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G174
> > >>>
> > >>>
> > >>> Thanks for you help!
> > >>>
> > >>> > > >>> > > >>> > > >>
> > >>
> > >>
> > >> --
> > >>
> > >> Karl Groves
> > >> www.karlgroves.com
> > >> @karlgroves
> > >> http://www.linkedin.com/in/karlgroves
> > >> Phone: +1 410.541.6829
> > >>
> > >> Modern Web Toolsets and Accessibility
> > >> Modern Web Toolsets & The Next Generation of Accessibility Testing
> Tools <https://www.youtube.com/watch?v=_uq6Db47-Ks>
> > >>
> > >> www.tenon.io
> > >> > > >> > > >> > > >
> > > > > > > > > > >
> > > > > > > >
> > > >