WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: Bryan Garaventa
Date: Apr 26, 2013 3:05PM

I understand. I chose CNN for the same reason, because it stretches the
limit.

I did another search to simplify things, choosing google.com instead, which
has one color violation.

I'm using Firefox with JAWS 14, since Wave throws an error when I try to use
IE8 (I'm using a Win XP Pro machine)

The following is the section feedback for the color contrast issue detected:

Details
list of 1 items
Contrast Errors (1)
list of 1 items nesting level 1
1 X Very Low Contrast
#
list end nesting level 2
list end nesting level 1
list end

Contrast Tools

Foreground color:
#0000ff
?
lighterforeground
|
darkerforeground

Background color:
#ffffff
?
lighterbackground
|
darkerbackground

Contrast Ratio: 8.6:1

Normal Text: Sample

AA: Pass
AAA: Pass

Large Text: Sample

AA: Pass
AAA: Pass

What I like about the checker at
http://www.checkmycolours.com/
Is that, even if it may over-estimate violations, it provides all that I
need in a tabular format. For example, I literally can go to the color
contrast ratio column, and use Alt+Control+Down to scan through the highest
violations, then move left by cell into the particular tag structure that it
refers to, and see the precise color combinations that were scanned.

As a developer, this is tremendously helpful, since I can simply search my
CSS files to locate these combinations, and easily home in on the tag and
colors that are being referenced.

----- Original Message -----
From: "Jared Smith" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Friday, April 26, 2013 1:47 PM
Subject: Re: [WebAIM] Color Contrast List?


> 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
>>> >>> >>> >>
>> >> >> > > >