WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Color Contrast List?

for

From: Bryan Garaventa
Date: Apr 29, 2013 12:12PM


I understand, but in my case, I have no sight. So an imperfect scanner at
least, gives me the ability to home in on possible areas where potential
problems may be found, instead of the default where I am, well, totally
blind to their existence...

An imperfect solution is better than no solution at all, and regarding color
contrast specifically, if I were to ask 100 sighted people to analyze the
same thing separately , I would not get 100% agreement in any case. Not for
anything other than black and white at any rate.



----- Original Message -----
From: "James Nurthen" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Monday, April 29, 2013 10:42 AM
Subject: Re: [WebAIM] Color Contrast List?


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