WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: checking for contrast errors

for

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

From: Sandy Feldman
Date: Tue, Oct 03 2017 11:31AM
Subject: checking for contrast errors
No previous message | Next message →

hey all,

http://imerciv.com/i/test.html

I have a page up that is kicking up some contrast errors. I am using
WAVE and checkmycolours.com to check it. WAVE finds 4 errors on the dark
style sheet. Check my colours finds 40 on a combination of both dark and
light styles.

The problem is I can't find the errors on the page or in the css. Are
these false positives, or am I missing something? (probably missing
something.)

Is there a contrast check utility that you like? One that does a whole
page at once?

thanks so much, Sandy

From: Jim Allan
Date: Tue, Oct 03 2017 12:44PM
Subject: Re: checking for contrast errors
← Previous message | Next message →

on Wave there are 3 buttons on the top Styles, No Styles, and Contrast.
Clicking on the Contrast button, shows the 4 errors.
but I can't find them on the page either.
3 of the 4 errors are the same color combo #000000 and #252525
the last one is #ffeeb5 and #f9f9f9
In your css you define the foreground AND background for most elements.
Given that, still can't find the offending combinations anywhere. One of
the things I do to find "hidden" low contrast text is to select all on the
page to highlight everything. poor contrast (forgotten heml elements
because of contrast) pop out. That is not the case on your page.
I think this is a wave team question

Jim


On Tue, Oct 3, 2017 at 12:31 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:

> hey all,
>
> http://imerciv.com/i/test.html
>
> I have a page up that is kicking up some contrast errors. I am using WAVE
> and checkmycolours.com to check it. WAVE finds 4 errors on the dark style
> sheet. Check my colours finds 40 on a combination of both dark and light
> styles.
>
> The problem is I can't find the errors on the page or in the css. Are
> these false positives, or am I missing something? (probably missing
> something.)
>
> Is there a contrast check utility that you like? One that does a whole
> page at once?
>
> thanks so much, Sandy
>
>
>
> > > > >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

From: Jeremy Echols
Date: Tue, Oct 03 2017 1:58PM
Subject: Re: checking for contrast errors
← Previous message | Next message →

I occasionally see this kind of behavior when there is a background image which makes the text visible, but without the background image, the text would be hard or impossible to see.

That said, your page seems to have invisible text that's flagged as being poor contrast. Perhaps the method used to hide it isn't what WAVE expects? Or maybe it's being hidden with JavaScript, so WAVE doesn't know it's hidden. It is a little odd, though, that the text is there at all. It's the "has submenu" text so far as I can tell, but something odd happens to it - it's "has submenu" in the HTML, but it changes to " submenu." In the DOM, which makes it even tougher to locate, since " submenu." isn't in the source.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, October 03, 2017 11:45 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] checking for contrast errors

on Wave there are 3 buttons on the top Styles, No Styles, and Contrast.
Clicking on the Contrast button, shows the 4 errors.
but I can't find them on the page either.
3 of the 4 errors are the same color combo #000000 and #252525 the last one is #ffeeb5 and #f9f9f9 In your css you define the foreground AND background for most elements.
Given that, still can't find the offending combinations anywhere. One of the things I do to find "hidden" low contrast text is to select all on the page to highlight everything. poor contrast (forgotten heml elements because of contrast) pop out. That is not the case on your page.
I think this is a wave team question

Jim


On Tue, Oct 3, 2017 at 12:31 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:

> hey all,
>
> http://imerciv.com/i/test.html
>
> I have a page up that is kicking up some contrast errors. I am using
> WAVE and checkmycolours.com to check it. WAVE finds 4 errors on the
> dark style sheet. Check my colours finds 40 on a combination of both
> dark and light styles.
>
> The problem is I can't find the errors on the page or in the css. Are
> these false positives, or am I missing something? (probably missing
> something.)
>
> Is there a contrast check utility that you like? One that does a whole
> page at once?
>
> thanks so much, Sandy
>
>
>
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

From: Jeremy Echols
Date: Tue, Oct 03 2017 2:04PM
Subject: Re: checking for contrast errors
← Previous message | Next message →

For what it's worth, assuming you use ARIA and JavaScript properly (I haven't tested this), you won't need to announce that a submenu is present, because screen readers will tell the user that there's a dropdown or that something can be collapsed or whatever. If that happens, you can eliminate the unnecessary text, and as a bonus the contrast errors go away.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeremy Echols
Sent: Tuesday, October 03, 2017 12:59 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] checking for contrast errors

I occasionally see this kind of behavior when there is a background image which makes the text visible, but without the background image, the text would be hard or impossible to see.

That said, your page seems to have invisible text that's flagged as being poor contrast. Perhaps the method used to hide it isn't what WAVE expects? Or maybe it's being hidden with JavaScript, so WAVE doesn't know it's hidden. It is a little odd, though, that the text is there at all. It's the "has submenu" text so far as I can tell, but something odd happens to it - it's "has submenu" in the HTML, but it changes to " submenu." In the DOM, which makes it even tougher to locate, since " submenu." isn't in the source.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, October 03, 2017 11:45 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] checking for contrast errors

on Wave there are 3 buttons on the top Styles, No Styles, and Contrast.
Clicking on the Contrast button, shows the 4 errors.
but I can't find them on the page either.
3 of the 4 errors are the same color combo #000000 and #252525 the last one is #ffeeb5 and #f9f9f9 In your css you define the foreground AND background for most elements.
Given that, still can't find the offending combinations anywhere. One of the things I do to find "hidden" low contrast text is to select all on the page to highlight everything. poor contrast (forgotten heml elements because of contrast) pop out. That is not the case on your page.
I think this is a wave team question

Jim


On Tue, Oct 3, 2017 at 12:31 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:

> hey all,
>
> http://imerciv.com/i/test.html
>
> I have a page up that is kicking up some contrast errors. I am using
> WAVE and checkmycolours.com to check it. WAVE finds 4 errors on the
> dark style sheet. Check my colours finds 40 on a combination of both
> dark and light styles.
>
> The problem is I can't find the errors on the page or in the css. Are
> these false positives, or am I missing something? (probably missing
> something.)
>
> Is there a contrast check utility that you like? One that does a whole
> page at once?
>
> thanks so much, Sandy
>
>
>
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

From: Sandy Feldman
Date: Tue, Oct 03 2017 2:55PM
Subject: Re: checking for contrast errors
← Previous message | Next message →

Jeremy, you are absolutely right about the submenu text. That fixed
three out of four contrast errors! There's one more. I still can't track
it down.

I have no idea why "has submenu" turns into "submenu". Anybody out there
have any thoughts?

I would happily change the js and ARIA and get rid of the invisible
text. Any really solid examples you could point too? In the meanwhile I
have tinkered with what I had and came up with this
http://imerciv.com/i/2test.html
any thoughts?

Thanks SO MUCH for taking the time to help with this!

Sandy


On 2017-10-03 4:04 PM, Jeremy Echols wrote:
> For what it's worth, assuming you use ARIA and JavaScript properly (I haven't tested this), you won't need to announce that a submenu is present, because screen readers will tell the user that there's a dropdown or that something can be collapsed or whatever. If that happens, you can eliminate the unnecessary text, and as a bonus the contrast errors go away.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jeremy Echols
> Sent: Tuesday, October 03, 2017 12:59 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] checking for contrast errors
>
> I occasionally see this kind of behavior when there is a background image which makes the text visible, but without the background image, the text would be hard or impossible to see.
>
> That said, your page seems to have invisible text that's flagged as being poor contrast. Perhaps the method used to hide it isn't what WAVE expects? Or maybe it's being hidden with JavaScript, so WAVE doesn't know it's hidden. It is a little odd, though, that the text is there at all. It's the "has submenu" text so far as I can tell, but something odd happens to it - it's "has submenu" in the HTML, but it changes to " submenu." In the DOM, which makes it even tougher to locate, since " submenu." isn't in the source.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
> Sent: Tuesday, October 03, 2017 11:45 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] checking for contrast errors
>
> on Wave there are 3 buttons on the top Styles, No Styles, and Contrast.
> Clicking on the Contrast button, shows the 4 errors.
> but I can't find them on the page either.
> 3 of the 4 errors are the same color combo #000000 and #252525 the last one is #ffeeb5 and #f9f9f9 In your css you define the foreground AND background for most elements.
> Given that, still can't find the offending combinations anywhere. One of the things I do to find "hidden" low contrast text is to select all on the page to highlight everything. poor contrast (forgotten heml elements because of contrast) pop out. That is not the case on your page.
> I think this is a wave team question
>
> Jim
>
>
> On Tue, Oct 3, 2017 at 12:31 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> hey all,
>>
>> http://imerciv.com/i/test.html
>>
>> I have a page up that is kicking up some contrast errors. I am using
>> WAVE and checkmycolours.com to check it. WAVE finds 4 errors on the
>> dark style sheet. Check my colours finds 40 on a combination of both
>> dark and light styles.
>>
>> The problem is I can't find the errors on the page or in the css. Are
>> these false positives, or am I missing something? (probably missing
>> something.)
>>
>> Is there a contrast check utility that you like? One that does a whole
>> page at once?
>>
>> thanks so much, Sandy
>>
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Jim Allan, Accessibility Coordinator
> Texas School for the Blind and Visually Impaired
> 1100 W. 45th St., Austin, Texas 78756
> voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964 > > > > > > --
Sandy

sandyfeldman.com
sandyfeldman.tumblr.com/
ca.linkedin.com/in/sandyfeldman
inclusivemedia.ca

From: Katie Haritos-Shea GMAIL
Date: Tue, Oct 03 2017 3:42PM
Subject: Re: checking for contrast errors
← Previous message | Next message →

" Clicking on the Contrast button, shows the 4 errors.
but I can't find them on the page either."

In WAVE you to also them click the Styles BUTTON, to remove styles to see those errors when they are in hidden/as-yet-unrevealed content.....

* katie *

Katie Haritos-Shea
Principal ICT Accessibility Architect, IAAP CPACC+WAS = CPWA (WCAG/Section 508/ADA/AODA)

Cell: 703-371-5545 | = EMAIL ADDRESS REMOVED = | Oakton, VA | LinkedIn Profile | Office: 703-371-5545 | @ryladog

NOTE: The content of this email should be construed to always be an expression of my own personal independent opinion, unless I identify that I am speaking on behalf of Knowbility, as their AC Rep at the W3C - and - that my personal email never expresses the opinion of my employer, Deque Systems.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, October 3, 2017 2:45 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] checking for contrast errors

on Wave there are 3 buttons on the top Styles, No Styles, and Contrast.
Clicking on the Contrast button, shows the 4 errors.
but I can't find them on the page either.
3 of the 4 errors are the same color combo #000000 and #252525 the last one is #ffeeb5 and #f9f9f9 In your css you define the foreground AND background for most elements.
Given that, still can't find the offending combinations anywhere. One of the things I do to find "hidden" low contrast text is to select all on the page to highlight everything. poor contrast (forgotten heml elements because of contrast) pop out. That is not the case on your page.
I think this is a wave team question

Jim


On Tue, Oct 3, 2017 at 12:31 PM, Sandy Feldman < = EMAIL ADDRESS REMOVED = >
wrote:

> hey all,
>
> http://imerciv.com/i/test.html
>
> I have a page up that is kicking up some contrast errors. I am using
> WAVE and checkmycolours.com to check it. WAVE finds 4 errors on the
> dark style sheet. Check my colours finds 40 on a combination of both
> dark and light styles.
>
> The problem is I can't find the errors on the page or in the css. Are
> these false positives, or am I missing something? (probably missing
> something.)
>
> Is there a contrast check utility that you like? One that does a whole
> page at once?
>
> thanks so much, Sandy
>
>
>
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

From: Sandy Feldman
Date: Wed, Oct 04 2017 8:12AM
Subject: Re: checking for contrast errors
← Previous message | No next message

hey all,

http://imerciv.com/i/2test.html

I have tried eliminating the "has submenu" invisible text and using ARIA
here instead. Did I get this right? Birkir Gunnarsson talked about this
approach in a thread about Mega Menu, 2017-01-19. I hope I understood
what he meant.

In the meanwhile there is one little bit of invisible text in the colour
contrast switcher that's breaking validation.

<span class="invisible">make the background</span> light</a>

Originally the links just said "dark" and "light" but they make no sense
out of context. On the other hand, no one will ever see that text. Maybe
it doesn't matter.

Thanks so much, everyone, for taking the time to help with this.

Sandy

On 2017-10-03 4:04 PM, Jeremy Echols wrote:
> For what it's worth, assuming you use ARIA and JavaScript properly (I haven't tested this), you won't need to announce that a submenu is present, because screen readers will tell the user that there's a dropdown or that something can be collapsed or whatever. If that happens, you can eliminate the unnecessary text, and as a bonus the contrast errors go away.