WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast Control Option

for

From: Paul Bohman
Date: Jan 6, 2015 1:27PM

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> > 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> >
> 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> > 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> > 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
> >> https://www.youtube.com/watch?v=_uq6Db47-Ks
> >>
> >> www.tenon.io
> >> > >> > >> > >
> > > > > > >
> > > >