E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: question regarding WAVE, color contrast and color difference

Number of posts in this thread: 7 (In chronological order)

From: Howard Kramer
Date: Sat, Oct 17 2015 1:01PM
Subject: question regarding WAVE, color contrast and color difference
No previous message | Next message →

Hello All:

This may be a question best answered by Jared or Jonathan but I welcome any
other input.

I used the WAVE tool <http://wave.webaim.org/>; to check the Accessing
Higher Ground home page <http://accessinghigherground.org/>; and found 2 low
contrast flags under the "style" tab (or with styles active) but none under
the "contrast" tab. Does this mean that there's a setting in my css that
stipulates low contrast but it is not used on the page?

Also, I ran the Juicy Studios Contrast Analyzer and found 1 color contrast
issue (this also seems to be a case of a css color setting that does not
actually appear on the page) but a number of color difference issues. The
latter is not specified in WCAG 2.0 as far as I can tell. How concerned
should I be regarding color difference?

Thanks,
Howard

--
Howard Kramer
Conference Coordinator
Accessing Higher Ground
303-492-8672
cell: 720-351-8668

Join us for the *Accessing Higher Ground Conference
<http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20, 2015.
Complete Attendee, Exhibitor, Hotel, and Registration materials are
available now.

Complete program information and registration is open for our full line-up
of webinars, *AHEADtoYOU!
<http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16>;*.
Site capacities for all webinar events is limited; please register at your
earliest convenience for the largest selection.

Not yet a member of AHEAD? *We welcome you to join AHEAD now.
<http://ahead.org/join/become-a-member>;*

From: Jared Smith
Date: Sat, Oct 17 2015 2:06PM
Subject: Re: question regarding WAVE, color contrast and color difference
← Previous message | Next message →

This is a known bug that occurs on some pages with WAVE. It will be
fixed with an update in the very near future. In the Contrast view you
can still see the icons in the page, they just don't display in the
sidebar.

Jared Smith
WebAIM.org

From: James Nurthen
Date: Sat, Oct 17 2015 6:22PM
Subject: Re: question regarding WAVE, color contrast and color difference
← Previous message | Next message →

There is only 1 real contrast error on that page - the placeholder text in
the search box does not meet the 4.5:1 ratio. Many contrast checkers miss
this one.

The other error that tools will find is the "Our Sponsors" text which is
provided as a header for screen reader users and is not shown visually on
the page. Many tools will still report this text as it is very difficult to
determine automatically that it is not actually visible.

Regards,
James

On Sat, Oct 17, 2015 at 12:01 PM, Howard Kramer < = EMAIL ADDRESS REMOVED = > wrote:

> Hello All:
>
> This may be a question best answered by Jared or Jonathan but I welcome any
> other input.
>
> I used the WAVE tool <http://wave.webaim.org/>; to check the Accessing
> Higher Ground home page <http://accessinghigherground.org/>; and found 2
> low
> contrast flags under the "style" tab (or with styles active) but none under
> the "contrast" tab. Does this mean that there's a setting in my css that
> stipulates low contrast but it is not used on the page?
>
> Also, I ran the Juicy Studios Contrast Analyzer and found 1 color contrast
> issue (this also seems to be a case of a css color setting that does not
> actually appear on the page) but a number of color difference issues. The
> latter is not specified in WCAG 2.0 as far as I can tell. How concerned
> should I be regarding color difference?
>
> Thanks,
> Howard
>
>
>
> --
> Howard Kramer
> Conference Coordinator
> Accessing Higher Ground
> 303-492-8672
> cell: 720-351-8668
>
> Join us for the *Accessing Higher Ground Conference
> <http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20,
> 2015.
> Complete Attendee, Exhibitor, Hotel, and Registration materials are
> available now.
>
>
>
> Complete program information and registration is open for our full line-up
> of webinars, *AHEADtoYOU!
> <http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
> Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16
> >*.
> Site capacities for all webinar events is limited; please register at your
> earliest convenience for the largest selection.
>
>
>
> Not yet a member of AHEAD? *We welcome you to join AHEAD now.
> <http://ahead.org/join/become-a-member>;*
> > > > >

From: Howard Kramer
Date: Sat, Oct 17 2015 6:42PM
Subject: Re: question regarding WAVE, color contrast and color difference
← Previous message | Next message →

Thanks James.

-Howard

On Sat, Oct 17, 2015 at 6:22 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:

> There is only 1 real contrast error on that page - the placeholder text in
> the search box does not meet the 4.5:1 ratio. Many contrast checkers miss
> this one.
>
> The other error that tools will find is the "Our Sponsors" text which is
> provided as a header for screen reader users and is not shown visually on
> the page. Many tools will still report this text as it is very difficult to
> determine automatically that it is not actually visible.
>
> Regards,
> James
>
> On Sat, Oct 17, 2015 at 12:01 PM, Howard Kramer < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hello All:
> >
> > This may be a question best answered by Jared or Jonathan but I welcome
> any
> > other input.
> >
> > I used the WAVE tool <http://wave.webaim.org/>; to check the Accessing
> > Higher Ground home page <http://accessinghigherground.org/>; and found 2
> > low
> > contrast flags under the "style" tab (or with styles active) but none
> under
> > the "contrast" tab. Does this mean that there's a setting in my css that
> > stipulates low contrast but it is not used on the page?
> >
> > Also, I ran the Juicy Studios Contrast Analyzer and found 1 color
> contrast
> > issue (this also seems to be a case of a css color setting that does not
> > actually appear on the page) but a number of color difference issues. The
> > latter is not specified in WCAG 2.0 as far as I can tell. How concerned
> > should I be regarding color difference?
> >
> > Thanks,
> > Howard
> >
> >
> >
> > --
> > Howard Kramer
> > Conference Coordinator
> > Accessing Higher Ground
> > 303-492-8672
> > cell: 720-351-8668
> >
> > Join us for the *Accessing Higher Ground Conference
> > <http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20,
> > 2015.
> > Complete Attendee, Exhibitor, Hotel, and Registration materials are
> > available now.
> >
> >
> >
> > Complete program information and registration is open for our full
> line-up
> > of webinars, *AHEADtoYOU!
> > <http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
> > Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16
> > >*.
> > Site capacities for all webinar events is limited; please register at
> your
> > earliest convenience for the largest selection.
> >
> >
> >
> > Not yet a member of AHEAD? *We welcome you to join AHEAD now.
> > <http://ahead.org/join/become-a-member>;*
> > > > > > > > > >
> > > > >

--
Howard Kramer
Conference Coordinator
Accessing Higher Ground
303-492-8672
cell: 720-351-8668

Join us for the *Accessing Higher Ground Conference
<http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20, 2015.
Complete Attendee, Exhibitor, Hotel, and Registration materials are
available now.

Complete program information and registration is open for our full line-up
of webinars, *AHEADtoYOU!
<http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16>;*.
Site capacities for all webinar events is limited; please register at your
earliest convenience for the largest selection.

Not yet a member of AHEAD? *We welcome you to join AHEAD now.
<http://ahead.org/join/become-a-member>;*

From: Birkir R. Gunnarsson
Date: Sun, Oct 18 2015 5:35PM
Subject: Re: question regarding WAVE, color contrast and color difference
← Previous message | Next message →

I am curious about that last statement.
There are a couple of classic case of hiding content for screen
readers only, using off-screen CSS or the clip method are the two most
popular ones.
These classes have no standard names, but often have names such as
visualyHidden or offScreen.
So I would think that accessibility testing tools can make educated
guesses about the intension based on these classes.
That being said, I also see the complications.
A text maybe visually hidden, or completely hidden, until user takes a
certain action (such as activating a link or schecking a checkbox), at
which point the content becomes visible.
I wish we had an ARIA attribute, standard class name or something else
to clearly signal the intention of visually hiding content but keeping
it available to assistive technologies.
ARIA already offers a lot of new functionality, such as invisible
labeling (using aria-label).

That being said, the less text we need specifically for one group of
users, the better.

On 10/17/15, Howard Kramer < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks James.
>
> -Howard
>
> On Sat, Oct 17, 2015 at 6:22 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
>
>> There is only 1 real contrast error on that page - the placeholder text in
>> the search box does not meet the 4.5:1 ratio. Many contrast checkers miss
>> this one.
>>
>> The other error that tools will find is the "Our Sponsors" text which is
>> provided as a header for screen reader users and is not shown visually on
>> the page. Many tools will still report this text as it is very difficult
>> to
>> determine automatically that it is not actually visible.
>>
>> Regards,
>> James
>>
>> On Sat, Oct 17, 2015 at 12:01 PM, Howard Kramer < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> > Hello All:
>> >
>> > This may be a question best answered by Jared or Jonathan but I welcome
>> any
>> > other input.
>> >
>> > I used the WAVE tool <http://wave.webaim.org/>; to check the Accessing
>> > Higher Ground home page <http://accessinghigherground.org/>; and found 2
>> > low
>> > contrast flags under the "style" tab (or with styles active) but none
>> under
>> > the "contrast" tab. Does this mean that there's a setting in my css that
>> > stipulates low contrast but it is not used on the page?
>> >
>> > Also, I ran the Juicy Studios Contrast Analyzer and found 1 color
>> contrast
>> > issue (this also seems to be a case of a css color setting that does not
>> > actually appear on the page) but a number of color difference issues.
>> > The
>> > latter is not specified in WCAG 2.0 as far as I can tell. How concerned
>> > should I be regarding color difference?
>> >
>> > Thanks,
>> > Howard
>> >
>> >
>> >
>> > --
>> > Howard Kramer
>> > Conference Coordinator
>> > Accessing Higher Ground
>> > 303-492-8672
>> > cell: 720-351-8668
>> >
>> > Join us for the *Accessing Higher Ground Conference
>> > <http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20,
>> > 2015.
>> > Complete Attendee, Exhibitor, Hotel, and Registration materials are
>> > available now.
>> >
>> >
>> >
>> > Complete program information and registration is open for our full
>> line-up
>> > of webinars, *AHEADtoYOU!
>> > <http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
>> > Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16
>> > >*.
>> > Site capacities for all webinar events is limited; please register at
>> your
>> > earliest convenience for the largest selection.
>> >
>> >
>> >
>> > Not yet a member of AHEAD? *We welcome you to join AHEAD now.
>> > <http://ahead.org/join/become-a-member>;*
>> > >> > >> > >> > >> >
>> >> >> >> >>
>
>
>
> --
> Howard Kramer
> Conference Coordinator
> Accessing Higher Ground
> 303-492-8672
> cell: 720-351-8668
>
> Join us for the *Accessing Higher Ground Conference
> <http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20, 2015.
> Complete Attendee, Exhibitor, Hotel, and Registration materials are
> available now.
>
>
>
> Complete program information and registration is open for our full line-up
> of webinars, *AHEADtoYOU!
> <http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
> Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16>;*.
> Site capacities for all webinar events is limited; please register at your
> earliest convenience for the largest selection.
>
>
>
> Not yet a member of AHEAD? *We welcome you to join AHEAD now.
> <http://ahead.org/join/become-a-member>;*
> > > > >

--
Work hard. Have fun. Make history.

From: James Nurthen
Date: Mon, Oct 19 2015 11:25AM
Subject: Re: question regarding WAVE, color contrast and color difference
← Previous message | Next message →

Birkir,
You can certainly do some guessing but there isn't a definitive way of
coding such a check as far as I'm aware. I try to avoid guessing in tools
as I find false negatives to be particularly worrying. In our internal tool
I account for this kind of thing when using certain technology stacks, but
I haven't attempted to write something that works with more publicly
available technology stacks.

ARIA tries to discourage this kind of text - there are a bunch of ways of
accomplishing the same thing as was done here without using "hidden" text
already using ARIA - so I'm not sure I see a need for ARIA to directly
support this kind of "hidden" text.
Regards,
James

On Sun, Oct 18, 2015 at 4:35 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> I am curious about that last statement.
> There are a couple of classic case of hiding content for screen
> readers only, using off-screen CSS or the clip method are the two most
> popular ones.
> These classes have no standard names, but often have names such as
> visualyHidden or offScreen.
> So I would think that accessibility testing tools can make educated
> guesses about the intension based on these classes.
> That being said, I also see the complications.
> A text maybe visually hidden, or completely hidden, until user takes a
> certain action (such as activating a link or schecking a checkbox), at
> which point the content becomes visible.
> I wish we had an ARIA attribute, standard class name or something else
> to clearly signal the intention of visually hiding content but keeping
> it available to assistive technologies.
> ARIA already offers a lot of new functionality, such as invisible
> labeling (using aria-label).
>
> That being said, the less text we need specifically for one group of
> users, the better.
>
>
>
> On 10/17/15, Howard Kramer < = EMAIL ADDRESS REMOVED = > wrote:
> > Thanks James.
> >
> > -Howard
> >
> > On Sat, Oct 17, 2015 at 6:22 PM, James Nurthen < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> >> There is only 1 real contrast error on that page - the placeholder text
> in
> >> the search box does not meet the 4.5:1 ratio. Many contrast checkers
> miss
> >> this one.
> >>
> >> The other error that tools will find is the "Our Sponsors" text which is
> >> provided as a header for screen reader users and is not shown visually
> on
> >> the page. Many tools will still report this text as it is very difficult
> >> to
> >> determine automatically that it is not actually visible.
> >>
> >> Regards,
> >> James
> >>
> >> On Sat, Oct 17, 2015 at 12:01 PM, Howard Kramer < = EMAIL ADDRESS REMOVED = >
> wrote:
> >>
> >> > Hello All:
> >> >
> >> > This may be a question best answered by Jared or Jonathan but I
> welcome
> >> any
> >> > other input.
> >> >
> >> > I used the WAVE tool <http://wave.webaim.org/>; to check the Accessing
> >> > Higher Ground home page <http://accessinghigherground.org/>; and
> found 2
> >> > low
> >> > contrast flags under the "style" tab (or with styles active) but none
> >> under
> >> > the "contrast" tab. Does this mean that there's a setting in my css
> that
> >> > stipulates low contrast but it is not used on the page?
> >> >
> >> > Also, I ran the Juicy Studios Contrast Analyzer and found 1 color
> >> contrast
> >> > issue (this also seems to be a case of a css color setting that does
> not
> >> > actually appear on the page) but a number of color difference issues.
> >> > The
> >> > latter is not specified in WCAG 2.0 as far as I can tell. How
> concerned
> >> > should I be regarding color difference?
> >> >
> >> > Thanks,
> >> > Howard
> >> >
> >> >
> >> >
> >> > --
> >> > Howard Kramer
> >> > Conference Coordinator
> >> > Accessing Higher Ground
> >> > 303-492-8672
> >> > cell: 720-351-8668
> >> >
> >> > Join us for the *Accessing Higher Ground Conference
> >> > <http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20,
> >> > 2015.
> >> > Complete Attendee, Exhibitor, Hotel, and Registration materials are
> >> > available now.
> >> >
> >> >
> >> >
> >> > Complete program information and registration is open for our full
> >> line-up
> >> > of webinars, *AHEADtoYOU!
> >> > <http://ahead.org/learn/virtual-learning/webinars>;* And the
> *Technology
> >> > Access Series <
> http://ahead.org/learn/virtual-learning/at_webinars_15_16
> >> > >*.
> >> > Site capacities for all webinar events is limited; please register at
> >> your
> >> > earliest convenience for the largest selection.
> >> >
> >> >
> >> >
> >> > Not yet a member of AHEAD? *We welcome you to join AHEAD now.
> >> > <http://ahead.org/join/become-a-member>;*
> >> > > >> > > >> > > >> > > >> >
> >> > >> > >> > >> > >>
> >
> >
> >
> > --
> > Howard Kramer
> > Conference Coordinator
> > Accessing Higher Ground
> > 303-492-8672
> > cell: 720-351-8668
> >
> > Join us for the *Accessing Higher Ground Conference
> > <http://accessinghigherground.org/>;* in Denver, Colorado, Nov 16-20,
> 2015.
> > Complete Attendee, Exhibitor, Hotel, and Registration materials are
> > available now.
> >
> >
> >
> > Complete program information and registration is open for our full
> line-up
> > of webinars, *AHEADtoYOU!
> > <http://ahead.org/learn/virtual-learning/webinars>;* And the *Technology
> > Access Series <http://ahead.org/learn/virtual-learning/at_webinars_15_16
> >*.
> > Site capacities for all webinar events is limited; please register at
> your
> > earliest convenience for the largest selection.
> >
> >
> >
> > Not yet a member of AHEAD? *We welcome you to join AHEAD now.
> > <http://ahead.org/join/become-a-member>;*
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >

From: _mallory
Date: Tue, Oct 20 2015 1:56AM
Subject: Re: question regarding WAVE, color contrast and color difference
← Previous message | No next message

On Mon, Oct 19, 2015 at 10:25:35AM -0700, James Nurthen wrote:
> Birkir,
> You can certainly do some guessing but there isn't a definitive way of
> coding such a check as far as I'm aware. I try to avoid guessing in tools
> as I find false negatives to be particularly worrying. In our internal tool
> I account for this kind of thing when using certain technology stacks, but
> I haven't attempted to write something that works with more publicly
> available technology stacks.

What would be cool then is if you're testing a page of your own or your
own organisation or you know they're using for example Bootstrap or some
front-end framework where we already know the classname used for the visually
hidden stuff, where we could tell the tool "for this page, things with this/
these classes are meant to be hidden." This way the tool is not guessing, the
tester has to take responsibility, but now they can better test their own
stuff.

Maybe this is actually already possible in the tool, I need to start using
it soon.

_mallory