WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast Control Option

for

From: Cliff Tyllick
Date: Jan 11, 2015 10:07PM

You're right, Jonathan—full user control of styles has not yet come to the mobile experience. But it will. (Android and iOS and, I assume, Windows for Mobile do already provide users with reverse- and high-contrast options. Not the same, but at least some control.)

For some organizations, the corporate branding does provide color combinations with contrast adequate to meet the WCAG 2.0 values for meaningful content. Others might decide to tweak their branding palette to that end. Still others might decide to use the corporate colors for design and highlight, not for content.

But all people who have a stake in website design should be made aware that there is no such thing as color combinations or even contrast levels that work for everyone. Some people with low vision need large print with low contrast, and some need specific color combinations so they can read comfortably.

So, yes, by all means produce a design that represents the organization's brand well and meets the contrast thresholds of WCAG 2.0—at least SC 1.4.3; preferably, especially for mobile, SC 1.4.6. But unless you just don't care about people who need to customize the appearance so they can do business with you, also make sure that all colors used in the presentation of meaningful content are set through CSS. Doing so allows the user to more easily customize the appearance to meet their needs, and, in my opinion, meets SC 1.4.8.

Cliff Tyllick

Sent from my iPhone
Although its spellcheck often saves me, all goofs in sent messages are its fault.

On Jan 11, 2015, at 2:24 PM, Jonathan Avila < <EMAIL REMOVED> > wrote:

>> 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
>
> While this may be true in the PC environment -- mobile browsers in large do not support such functionality.
>
> I believe the intent of the SC 1.4.3 Contrast Minimum is to allow for sufficient contrast regardless of a user knowing about or having access to change CSS preferences. Perhaps I'm expecting too much but I want sufficient contrast while still having access to the design colors that represent the website.
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
> 703-637-8957 (o)
>
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Cliff Tyllick
> Sent: Saturday, January 10, 2015 3:05 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] High Contrast Control Option
>
> 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!
>>>>>>
>>>>>> >>>>>> >>>>>> >>>>>> <javascript:;>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>>
>>>>> 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
>>>>> >>>>> >>>>> >>>>> <javascript:;>
>>>>
>>>> >>>> >>>> list messages to <EMAIL REMOVED> <javascript:;>
>>>
>>> >>> >>> list messages to <EMAIL REMOVED> <javascript:;>
>> >> >> list messages to <EMAIL REMOVED> <javascript:;>
> > > > >