E-mail List Archives
Thread: High Contrast Control Option
Number of posts in this thread: 10 (In chronological order)
From: Jordan Wilson
Date: Mon, Jan 05 2015 8:30AM
Subject: High Contrast Control Option
No previous message | Next message →
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!
From: Karl Groves
Date: Mon, Jan 05 2015 9:22AM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
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 ADDRESS 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
From: Jordan Wilson
Date: Mon, Jan 05 2015 10:04AM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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
>>>
From: Paul J. Adam
Date: Mon, Jan 05 2015 10:16AM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>> >> >> >
> > >
From: Paul Bohman
Date: Tue, Jan 06 2015 1:27PM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> >> > >> > >> > >
> > > > > > >
> > > >
From: Cliff Tyllick
Date: Sat, Jan 10 2015 1:04AM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> > >> > > >> > > >> > > >
> > > > > > > > > > >
> > > > > > > >
> > > >
From: Jonathan Avila
Date: Sun, Jan 11 2015 1:24PM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
> 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 ADDRESS REMOVED =
703-637-8957 (o)
From: Cliff Tyllick
Date: Sun, Jan 11 2015 10:07PM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED =
> 703-637-8957 (o)
>
>
>
From: Jonathan Avila
Date: Mon, Jan 12 2015 8:20AM
Subject: Re: High Contrast Control Option
← Previous message | Next message →
> 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.
I agree, defining foreground and background colors and making sure pages are readable with high contrast mode is critical. Reliance on CSS images for meaningful content is a continued trend and something that we still don't have a really good solution to. This practice is counter to the whole idea of CSS and solutions to check for HC, use of pseudo classes or use of clipping of inline images aren't optimal. We really need a better solution that is accepted by and adopted by the community.
Jonathan
--Â
Jonathan AvilaÂ
Chief Accessibility Officer
SSB BART GroupÂ
= EMAIL ADDRESS REMOVED =
Phone 703.637.8957 Â
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Jordan Wilson
Date: Mon, Jan 12 2015 12:02PM
Subject: Re: High Contrast Control Option
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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:;>
>> > >
>> > > >> > > >> > > >> >
>> > >> > >> > >> >
>> >> >> >>
>>>