WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast Control Option

for

From: Paul J. Adam
Date: Jan 5, 2015 10:16AM

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