WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: Greg Kraus
Date: Apr 26, 2013 8:56PM

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