WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: Bryan Garaventa
Date: Apr 29, 2013 10:38AM

That is excellent! Thank you, it works for authenticated sites as well :)
I'll add this to my resource list.



----- Original Message -----
From: "Bourne, Sarah (ITD)" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, April 29, 2013 6:36 AM
Subject: Re: [WebAIM] Color Contrast List?


> Bryan,
>
> Nancy's and Greg's suggestions should be very useful for Sam's original
> question.
>
> For what you're looking for, the Colour Contrast Analyser tool on the
> Juicy Studio Accessibility Toolbar for Firefox
> (https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/)
> may do the trick. The results are presented in a table that includes
> elements and classes and parent nodes, as well as the color values and
> pass/fail information.
>
> sb
> Sarah E. Bourne
> Director of Assistive Technology &
> Mass.Gov Chief Technology Strategist
> Information Technology Division
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> <EMAIL REMOVED>
> http://www.mass.gov/itd
>
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
> Sent: Saturday, April 27, 2013 12:09 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Color Contrast List?
>
> 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
>>>>>> >>>>>> >>>>>> >>>>>
>>>>> >>>>> >>>>> >>>> >>>> >>>> >>>
>>> >>> >>> >> >> >> >
> > > > > >