WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: Jared Smith
Date: Apr 26, 2013 2:47PM

It doesn't help that you picked CNN.com as an example as it's one of
the most awful sites on the planet for accessibility and navigation.

You first need to select the "Contrast" button at the top of the
sidebar immediately after the address box. This limits the icons
presented in both the sidebar and in the page itself to only the
contrast errors. The way it is currently set up, you would need to
navigate through the page itself (located in an iframe within the main
landmark) to find the contrast error icons. These are placed at the
beginning of each element to which that error applies. You can
activate an icon to have the color values, contrast ratio, A and AA
pass/fail status, etc. for that element updated back in the details
panel.

There is also a listing of icons (one for each contrast error) visible
in the details panel and you can click on an icon to highlight the
element within the page itself and also update its color value, etc.
in the details panel. We have chosen to not make these individual
icons keyboard tabable as our testing found that users were
overwhelmed by the sheer volume of them (over 400 of them on CNN) and
they made finding the types and numbers of distinct error types
extremely difficult for keyboard users.

As Birkir noted, WAVE takes a primarily visual presentation for
accessibility issues, which introduces some interesting screen reader
accessibility issues. I'm very open to suggestions on how we could
make the interaction more intuitive and easy for screen reader users.

Jared


On Fri, Apr 26, 2013 at 2:26 PM, Bryan Garaventa
< <EMAIL REMOVED> > wrote:
> I see what you mean, but I'm having trouble locating which elements have
> color contrast issues on wave
> http://wave.webaim.org/
>
> For example, I went to the above url, entered 'http://cnn.com', and see
> seventy+ color contrast violations. However I can't locate them. How do I
> get a list of exactly which elements are in violation, the
> foreground/background color values detected, and what the color contrast
> ratios are for each?
>
> ----- Original Message -----
> From: "Jared Smith" < <EMAIL REMOVED> >
> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> Sent: Friday, April 26, 2013 1:01 PM
> Subject: Re: [WebAIM] Color Contrast List?
>
>
>> On Fri, Apr 26, 2013 at 1:37 PM, Bryan Garaventa wrote:
>>
>>> I searched around, and found an awesome resource at
>>> http://www.checkmycolours.com/
>>
>> A word of caution about this and similar tools...
>>
>> These tools generally check all possible foreground and background
>> combinations for all elements. They do not, however, check to ensure
>> that a particular color combination is actually in use on the page. So
>> just because it flags a lot of failures does not mean there are
>> actually contrast issues present on the site. Yes, this information
>> can still be very valuable, but it can also result in a lot of
>> confusion or misapplied angst or effort in trying to address issues
>> that don't exist in reality.
>>
>> We've put in significant effort to address these issues in the newly
>> released WAVE tool. It only flags color combinations that are actually
>> present in the page (meaning there is text present that is also
>> presented on a particular background color and that exact combination
>> fails the contrast requirements). This turns out to be quite complex
>> when you consider CSS inheritance, transparency, etc., and we still
>> have a few kinks to work out.
>>
>> The Checkmycolors tool, for example, flags 15 failures on the
>> WebAIM.org site when there is actually only one instance of text on a
>> background color that fails WCAG. This particular failure is the only
>> one that WAVE identifies, thus focusing effort on the actual failure
>> instead of many potential, but nonexistent, failures.
>>
>> Jared
>> >> >> >
> > >