WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: Bryan Garaventa
Date: Apr 26, 2013 10:08PM

Thanks, actually my difficulty is not analyzing color values, it's obtaining
them.

For example, say site A at something.com is what I need to analyze. Site A
is totally dynamic and includes many variables such as simulated buttons
that use CSS3 for adding shadowing, filters, radius, gradients, transform,
or even background image sprites to change the appearance of elements and
make them look different.

A sighted person can simply eyeball it, or hover the mouse over the given
element to analyze coloration issues using a color checker utility.

A blind person though, like me, cannot. So this is why it is so valuable to
have an automated process to scan the live DOM of rendered content, record
the HTML markup of DOM nodes that have coloration issues, then display them
along with their foreground and background color values and contrast ratios,
so that it's clear where the problem areas can be found.

I know this is mainly a sighted realm, but that's not much of a comfort when
I'm trying to build something, and I get the feeling that I'm playing
Where's Waldo and everyone seems to know the answer, except me.









----- Original Message -----
From: "Greg Kraus" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Friday, April 26, 2013 7:56 PM
Subject: Re: [WebAIM] Color Contrast List?


> If you're planning a color palette, I created this tool to help you
> analyze all of the color combinations in a given palette for WCAG2
> Level AA and AAA conformance. You enter whatever set of colors you
> want and it will show you how each color works with all of the other
> colors in the palette.
>
> go.ncsu.edu/accessible-color-palette
>
> To see the tool in action with an already built color palette, you can
> view NC State University's official color palette.
>
> http://go.ncsu.edu/accessible-color-palette-ncsu
>
> Greg
>
> --
> Greg Kraus
> University IT Accessibility Coordinator
> NC State University
> 919.513.4087
> <EMAIL REMOVED>
>
>
> On Fri, Apr 26, 2013 at 5:05 PM, Bryan Garaventa
> < <EMAIL REMOVED> > wrote:
>> 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
>>>>> >>>>> >>>>> >>>>
>>>> >>>> >>>> >>> >>> >>> >>
>> >> >> > > >