WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Testing color contrast as a screen reader user

for

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

From: Birkir R. Gunnarsson
Date: Mon, Mar 18 2013 1:25PM
Subject: Testing color contrast as a screen reader user
No previous message | Next message →

Hey guys

What are the best solutions for detecting color contrast issues on a
webpage as a screen reader user (hence, someone awfully un-sighted)?
If you know the color values, there are various checkers out there
that can be used.
I had some issues using wave.webaim.org on a website. It detected 6
color contrast errors, but my colleague said they were wrong and not
comparing the right things (again, Wave is awesome, so no one take
that as undue criticism, and may be my colleague is wrong, just hard
for me to judge).
If there is a tool that can be used accessibly to color analyze a page
and point out sections that do not comply with WCAG contrast ratio
specs, it'd be awfully neat.
These are very common issues , especially lately, and a lot of
partially sighted folks are complaining to me about it, so if I could
quickly analyze a large number of pages just for that and sort of
start up a campaign to try and make people aware of it, that'd be
neat.

Similarly, keyboard focus outline issues. Do the standard
accessibility tools detect and report on vissible keyboard focus
outlines or not?
I have not seen this with the tools I have tested, so I don't know
whether the focus outline has been just fine on the pages I've tested
with these tools, or whether the tool does not test for that (and may
be it is something that has to be tested manually, though it seems the
focus is defined and styled in the CSS).
Basically I want to work very hard myself to independently do a
non-screen reader specific analysis. There are some things I can't do
well, things that are just purely visual judgements, but I very
strongly want to avoid giving anyone the impression that my
accessibility analysis has to do with whether a page works with a
screen reader, even if it is important.
I have solved this by teaming up with a colleague, who does the visual
stuff, and I do all ARIA and screen reader things, but the more I can
do independently, the quicker I can work and the more pages I can
test, albeit loosely.
Cheers
-B

From: John E Brandt
Date: Mon, Mar 18 2013 1:43PM
Subject: Re: Testing color contrast as a screen reader user
← Previous message | Next message →

I have recently started using the HTML_CodeSniffer by Squiz. You add it as a
bookmarklet, and when clicked on, it analyzes the current page for
accessibility errors and warnings using the three levels of WCAG or Sect 508
standards. It seems to do a pretty good job of analyzing color contrast and
can put a "pointer" on the place where the "error" occurs. This is very
helpful when used with FireBug to isolate the CSS code in the Content
Management System that needs to be fixed.

http://squizlabs.github.com/HTML_CodeSniffer/

~j

John E. Brandt
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R.
Gunnarsson
Sent: Monday, March 18, 2013 3:25 PM
To: WebAIM Discussion List
Subject: [WebAIM] Testing color contrast as a screen reader user

Hey guys

What are the best solutions for detecting color contrast issues on a webpage
as a screen reader user (hence, someone awfully un-sighted)?
If you know the color values, there are various checkers out there that can
be used.
I had some issues using wave.webaim.org on a website. It detected 6 color
contrast errors, but my colleague said they were wrong and not comparing the
right things (again, Wave is awesome, so no one take that as undue
criticism, and may be my colleague is wrong, just hard for me to judge).
If there is a tool that can be used accessibly to color analyze a page and
point out sections that do not comply with WCAG contrast ratio specs, it'd
be awfully neat.
These are very common issues , especially lately, and a lot of partially
sighted folks are complaining to me about it, so if I could quickly analyze
a large number of pages just for that and sort of start up a campaign to try
and make people aware of it, that'd be neat.

Similarly, keyboard focus outline issues. Do the standard accessibility
tools detect and report on vissible keyboard focus outlines or not?
I have not seen this with the tools I have tested, so I don't know whether
the focus outline has been just fine on the pages I've tested with these
tools, or whether the tool does not test for that (and may be it is
something that has to be tested manually, though it seems the focus is
defined and styled in the CSS).
Basically I want to work very hard myself to independently do a non-screen
reader specific analysis. There are some things I can't do well, things that
are just purely visual judgements, but I very strongly want to avoid giving
anyone the impression that my accessibility analysis has to do with whether
a page works with a screen reader, even if it is important.
I have solved this by teaming up with a colleague, who does the visual
stuff, and I do all ARIA and screen reader things, but the more I can do
independently, the quicker I can work and the more pages I can test, albeit
loosely.
Cheers
-B
messages to = EMAIL ADDRESS REMOVED =

From: Mohit Rajan Verma
Date: Mon, Mar 18 2013 1:49PM
Subject: Re: Testing color contrast as a screen reader user
← Previous message | Next message →

Hello Mr. Birkir,

There is a firefox plugin "colorzilla" which tells the color values of any
color used in the screen. You can use these color values with any color
contrast detection tool to verify the contrast issue.

As of the tools which I used, none of tells about the focus outline issues.
I test it manually, although sometimes is quite a tedious task when
hundreds of links are available on a single page. Let us know if any tool
or plugin can be used to check focus outline issues.

Regards,
Mohit Verma

On Tue, Mar 19, 2013 at 12:55 AM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Hey guys
>
> What are the best solutions for detecting color contrast issues on a
> webpage as a screen reader user (hence, someone awfully un-sighted)?
> If you know the color values, there are various checkers out there
> that can be used.
> I had some issues using wave.webaim.org on a website. It detected 6
> color contrast errors, but my colleague said they were wrong and not
> comparing the right things (again, Wave is awesome, so no one take
> that as undue criticism, and may be my colleague is wrong, just hard
> for me to judge).
> If there is a tool that can be used accessibly to color analyze a page
> and point out sections that do not comply with WCAG contrast ratio
> specs, it'd be awfully neat.
> These are very common issues , especially lately, and a lot of
> partially sighted folks are complaining to me about it, so if I could
> quickly analyze a large number of pages just for that and sort of
> start up a campaign to try and make people aware of it, that'd be
> neat.
>
> Similarly, keyboard focus outline issues. Do the standard
> accessibility tools detect and report on vissible keyboard focus
> outlines or not?
> I have not seen this with the tools I have tested, so I don't know
> whether the focus outline has been just fine on the pages I've tested
> with these tools, or whether the tool does not test for that (and may
> be it is something that has to be tested manually, though it seems the
> focus is defined and styled in the CSS).
> Basically I want to work very hard myself to independently do a
> non-screen reader specific analysis. There are some things I can't do
> well, things that are just purely visual judgements, but I very
> strongly want to avoid giving anyone the impression that my
> accessibility analysis has to do with whether a page works with a
> screen reader, even if it is important.
> I have solved this by teaming up with a colleague, who does the visual
> stuff, and I do all ARIA and screen reader things, but the more I can
> do independently, the quicker I can work and the more pages I can
> test, albeit loosely.
> Cheers
> -B
> > > >

From: Jared Smith
Date: Mon, Mar 18 2013 3:39PM
Subject: Re: Testing color contrast as a screen reader user
← Previous message | Next message →

On Mon, Mar 18, 2013 at 1:25 PM, Birkir R. Gunnarsson wrote:

> I had some issues using wave.webaim.org on a website. It detected 6
> color contrast errors, but my colleague said they were wrong and not
> comparing the right things

We'd be happy to look into what the issues are. WAVE uses some pretty
complex logic to identify *actual* contrast issues - meaning elements
that have defined colors below the WCAG thresholds that actually
present text in that combination. This is not easy to automate due to
CSS inheritance, etc., but I think WAVE does a good job of it. And it
presents the results in an accessible way.

> Similarly, keyboard focus outline issues. Do the standard
> accessibility tools detect and report on vissible keyboard focus
> outlines or not?

We're working on reintroducing this into WAVE. It should soon be
flagging sites that have links that do not have a visible focus
outline. Again, it's pretty hard to detect this in an automated way
because you can't detect focus outlines without actually focusing
(tabbing to) a link. I'm not aware of any other tool that does this.

Jared

From: James Nurthen
Date: Mon, Mar 18 2013 4:36PM
Subject: Re: Testing color contrast as a screen reader user
← Previous message | Next message →

If this is just a case of background and foreground colours then it is
automatable, but if any CSS features such as gradients, transparencies and
background images are used then as far as I'm aware it is impossible to
fully automate the check.
As far as I know the best an automated tool can do if these features are
being used is to inform the user that they need to manually check the
contrast in some places.

Regards,
James


On Mon, Mar 18, 2013 at 2:39 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Mon, Mar 18, 2013 at 1:25 PM, Birkir R. Gunnarsson wrote:
>
> > I had some issues using wave.webaim.org on a website. It detected 6
> > color contrast errors, but my colleague said they were wrong and not
> > comparing the right things
>
> We'd be happy to look into what the issues are. WAVE uses some pretty
> complex logic to identify *actual* contrast issues - meaning elements
> that have defined colors below the WCAG thresholds that actually
> present text in that combination. This is not easy to automate due to
> CSS inheritance, etc., but I think WAVE does a good job of it. And it
> presents the results in an accessible way.
>
> > Similarly, keyboard focus outline issues. Do the standard
> > accessibility tools detect and report on vissible keyboard focus
> > outlines or not?
>
> We're working on reintroducing this into WAVE. It should soon be
> flagging sites that have links that do not have a visible focus
> outline. Again, it's pretty hard to detect this in an automated way
> because you can't detect focus outlines without actually focusing
> (tabbing to) a link. I'm not aware of any other tool that does this.
>
> Jared
> > > >

From: Michael R. Burks
Date: Mon, Mar 18 2013 5:35PM
Subject: Re: Testing color contrast as a screen reader user
← Previous message | No next message

This is a great discussion.

In particular these two items are in my opinion very much neglected.

I do a lot of testing, and it would be helpful if the Wave could help with
focus issues. Nothing is perfect. For example I often use ZoomText and it
even misses some things, but nonetheless this would be great.

The color contrast issues would also be terrific as they are difficult to
do even when you are looking at them.

Thanks to all the folks at WebAIM for working on this.

Sincerely,

Mike Burks
919-882-1884 - Fax
919-349-6661 - Office

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Monday, March 18, 2013 5:40 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Testing color contrast as a screen reader user

On Mon, Mar 18, 2013 at 1:25 PM, Birkir R. Gunnarsson wrote:

> I had some issues using wave.webaim.org on a website. It detected 6
> color contrast errors, but my colleague said they were wrong and not
> comparing the right things

We'd be happy to look into what the issues are. WAVE uses some pretty
complex logic to identify *actual* contrast issues - meaning elements that
have defined colors below the WCAG thresholds that actually present text in
that combination. This is not easy to automate due to CSS inheritance, etc.,
but I think WAVE does a good job of it. And it presents the results in an
accessible way.

> Similarly, keyboard focus outline issues. Do the standard
> accessibility tools detect and report on vissible keyboard focus
> outlines or not?

We're working on reintroducing this into WAVE. It should soon be flagging
sites that have links that do not have a visible focus outline. Again, it's
pretty hard to detect this in an automated way because you can't detect
focus outlines without actually focusing (tabbing to) a link. I'm not aware
of any other tool that does this.

Jared
messages to = EMAIL ADDRESS REMOVED =