WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast Control Option

for

From: Jordan Wilson
Date: Jan 12, 2015 12:02PM

Thanks Cliff, I think this best addresses what I was asking. Good tip on
providing the background color CSS even when its just default white.



On 1/10/15, 3:04 AM, "Cliff Tyllick" < <EMAIL REMOVED> > wrote:

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