WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: James Nurthen
Date: Apr 29, 2013 11:42AM

Yet again I would just like to point out that all of these automated color
contrast tools produce many false positive and many false negatives. Unless
someone can show me otherwise all of these tools can produce misleading
results when any of the following techniques are used in the page:

- Background images under text
- CSS Gradients
- Any background CSS colours using rgba values (semi-transparent
backgrounds)

These techniques are becoming more and more common so these semi-automated
tools are becoming less and less useful over time. I wish there were a good
solution but I am not aware of one at the moment.

Regards,
James



On Mon, Apr 29, 2013 at 9:38 AM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

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