E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 20 (In chronological order)

From: TX Knight
Date: Fri, Apr 26 2013 12:19PM
Subject: Color Contrast List?
No previous message | Next message →

Hi all,

Does anyone know of a convenient list or chart of font and background
colors that have been predetermined to pass WCAG standards?
Thanks in advance,
Sam

--
“Be who you are and say what you feel because those who mind don't matter
and those who matter don't mind.”
~Dr. Seuss

“If you don't know where you are going, any road will get you there.”
~Lewis Carroll

From: Jared Smith
Date: Fri, Apr 26 2013 12:56PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

Just based on RGB colors (ignoring opacity, gradients, etc.) there are
several trillion available combinations of foreground and background
colors that would pass WCAG 2.0. So, no, there's not really a list or
chart.

I remember seeing a W3C resource that had some examples of passing
combinations, but cannot currently find it. But I don't think it's
best to prescribe to a particular combination. Instead, it's best to
design a well-thought out color scheme while using WCAG contrast
checking tools (such as ours at
http://webaim.org/resources/contrastchecker/ or by using the WAVE tool
- http://wave.webaim.org/) to ensure that the color combinations would
at least meet the minimal WCAG contrast thresholds.

Jared

On Fri, Apr 26, 2013 at 12:19 PM, TX Knight < = EMAIL ADDRESS REMOVED = > wrote:
> Hi all,
>
> Does anyone know of a convenient list or chart of font and background
> colors that have been predetermined to pass WCAG standards?
> Thanks in advance,
> Sam
>
> --
> “Be who you are and say what you feel because those who mind don't matter
> and those who matter don't mind.”
> ~Dr. Seuss
>
> “If you don't know where you are going, any road will get you there.”
> ~Lewis Carroll
> > >

From: Trafford, Logan
Date: Fri, Apr 26 2013 1:03PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

I've done the exercise for the fonts (on white background only) for Microsoft Word 2007 if that's any value to you.


Logan Trafford
Web Intermediate Systems Developer/Integrator
Operations Solutions & Services Branch
Information Technology Services Department
City of Ottawa
100 Constellation Crescent,
Ottawa ON K2G 6J8
613-580-2424 x13598

From: Trafford, Logan
Date: Fri, Apr 26 2013 1:06PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

Sorry..to clarify..for the 70 default font colors (from the drop select) in Word 2007. Obviously NOT the trillions of combinations that Jared noted.

Logan

From: Bryan Garaventa
Date: Fri, Apr 26 2013 1:37PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

Being fully blind, this has been a big problem for me, since it's difficult
for me to identify the colors of an element with reliability, especially
where images are concerned across complex and dynamic pages.

I searched around, and found an awesome resource at
http://www.checkmycolours.com/

Which appears to do exactly what I need.

I scanned cnn.com for example, and found a ton of violations.

The guy who built this thing is brilliant.



----- Original Message -----
From: "Jared Smith" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, April 26, 2013 11:56 AM
Subject: Re: [WebAIM] Color Contrast List?


Just based on RGB colors (ignoring opacity, gradients, etc.) there are
several trillion available combinations of foreground and background
colors that would pass WCAG 2.0. So, no, there's not really a list or
chart.

I remember seeing a W3C resource that had some examples of passing
combinations, but cannot currently find it. But I don't think it's
best to prescribe to a particular combination. Instead, it's best to
design a well-thought out color scheme while using WCAG contrast
checking tools (such as ours at
http://webaim.org/resources/contrastchecker/ or by using the WAVE tool
- http://wave.webaim.org/) to ensure that the color combinations would
at least meet the minimal WCAG contrast thresholds.

Jared

On Fri, Apr 26, 2013 at 12:19 PM, TX Knight < = EMAIL ADDRESS REMOVED = > wrote:
> Hi all,
>
> Does anyone know of a convenient list or chart of font and background
> colors that have been predetermined to pass WCAG standards?
> Thanks in advance,
> Sam
>
> --
> “Be who you are and say what you feel because those who mind don't matter
> and those who matter don't mind.”
> ~Dr. Seuss
>
> “If you don't know where you are going, any road will get you there.”
> ~Lewis Carroll
> > >

From: Carol E Wheeler
Date: Fri, Apr 26 2013 1:45PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

Check My Colors is a nice tool. If you are sighted you can also see the
sample as styled to understand what passes and what doesn't.

Thanks for passing this along.

-- cew

*Carol E. Wheeler*

Web Co-ordinator
American Institute for Cancer Research
1759 R Street NW
Washington DC 20009

Direct Dial: 202-600-3001
Tel: 202-328-7744
Fax: 202-328-7226

= EMAIL ADDRESS REMOVED =
http://www.aicr.org

From: Jared Smith
Date: Fri, Apr 26 2013 2:01PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Fri, Apr 26 2013 2:26PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
> > >

From: Birkir R. Gunnarsson
Date: Fri, Apr 26 2013 2:40PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

Excellent discussion, I am dealing with exactly these types of issues myself.
Thanks Jared, you guys are doing a good job, being able to test color
contrast as a blind person just give me a bit of a kick and reason to
grin inanely, when the customers don´t see me of course.
I do find the Wave color contrast tool confusing myself, but I suppose
it is very hard to explain color contrast errors to the blind, but if
I could narrow it down to an element and its background it would be
very valuable.


On 4/26/13, Bryan Garaventa < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>> >> >> >
> > > >

From: Jared Smith
Date: Fri, Apr 26 2013 2:47PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>> >> >> >
> > >

From: Bryan Garaventa
Date: Fri, Apr 26 2013 3:05PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>>> >>> >>> >>
>> >> >> > > >

From: Greg Kraus
Date: Fri, Apr 26 2013 8:56PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED =


On Fri, Apr 26, 2013 at 5:05 PM, Bryan Garaventa
< = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>>>> >>>> >>>> >>>
>>> >>> >>> >> >> >> >
> > >

From: Nancy Johnson
Date: Fri, Apr 26 2013 9:49PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

Hi,

I've used this one as well
http://juicystudio.com/services/luminositycontrastratio.php

Nancy Johnson

On Friday, April 26, 2013, TX Knight wrote:

> Hi all,
>
> Does anyone know of a convenient list or chart of font and background
> colors that have been predetermined to pass WCAG standards?
> Thanks in advance,
> Sam
>
> --
> “Be who you are and say what you feel because those who mind don't matter
> and those who matter don't mind.”
> ~Dr. Seuss
>
> “If you don't know where you are going, any road will get you there.”
> ~Lewis Carroll
> > > >

From: Bryan Garaventa
Date: Fri, Apr 26 2013 10:08PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
> On Fri, Apr 26, 2013 at 5:05 PM, Bryan Garaventa
> < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>>>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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
>>>>> >>>>> >>>>> >>>>
>>>> >>>> >>>> >>> >>> >>> >>
>> >> >> > > >

From: Bourne, Sarah (ITD)
Date: Mon, Apr 29 2013 7:36AM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED =
http://www.mass.gov/itd

From: Bryan Garaventa
Date: Mon, Apr 29 2013 10:38AM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> http://www.mass.gov/itd
>
>
>

From: James Nurthen
Date: Mon, Apr 29 2013 11:42AM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> > http://www.mass.gov/itd
> >
> >
> >

From: Bryan Garaventa
Date: Mon, Apr 29 2013 12:12PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> > http://www.mass.gov/itd
>> >
>> >
>> >

From: Jared Smith
Date: Mon, Apr 29 2013 12:31PM
Subject: Re: Color Contrast List?
← Previous message | Next message →

On Mon, Apr 29, 2013 at 11:42 AM, James Nurthen wrote:

> - Background images under text

If a user disabled images, it is important that a background color be
defined that provides adequate contrast for the text. It is my opinion
that contrast tools should flag contrast issues regardless of whether
a background image is defined or present.

At the same time, it would be helpful for contrast tools to also check
for issues with background images, but this is quite difficult to do
in an automated way, especially if the image contains both the
foreground text and the background color.

> - CSS Gradients

Yep. This is also quite difficult to do in an automated tool due to
the many complex ways in which gradients can be defined. There also is
no specification in WCAG as to how to handle gradients (or text
highlights, drop shadows, borders, rgba, etc.)

> - Any background CSS colours using rgba values (semi-transparent
> backgrounds)

WAVE accounts for semi-transparency though there is no defined WCAG
formula for doing so. Again, this is fairly complex to handle and we
need to refine this.

> These techniques are becoming more and more common so these semi-automated
> tools are becoming less and less useful over time.

Which increases the necessity for common sense and manual testing,
though I realize the limitations for blind users in manual testing
these visual components.

Jared

From: James Nurthen
Date: Mon, Apr 29 2013 4:53PM
Subject: Re: Color Contrast List?
← Previous message | No next message

On Mon, Apr 29, 2013 at 11:31 AM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> On Mon, Apr 29, 2013 at 11:42 AM, James Nurthen wrote:
>
> > - Background images under text
>
> If a user disabled images, it is important that a background color be
> defined that provides adequate contrast for the text. It is my opinion
> that contrast tools should flag contrast issues regardless of whether
> a background image is defined or present.
>

It is not the false positives due to the defined colour not having adequate
contrast which concern me, but rather issues where there *is* adequate
contrast to the defined colour, but *not* to the background image. I
believe checkers should flag these as warnings which require a manual
check.
(Note - in my experience you can generally eliminate background images
below a certain size which are not repeating from those which have
potential issues)


>
> At the same time, it would be helpful for contrast tools to also check
> for issues with background images, but this is quite difficult to do
> in an automated way, especially if the image contains both the
> foreground text and the background color.
>

I agree. This is really hard and I have never seen a good solution.


>
> > - CSS Gradients
>
> Yep. This is also quite difficult to do in an automated tool due to
> the many complex ways in which gradients can be defined. There also is
> no specification in WCAG as to how to handle gradients (or text
> highlights, drop shadows, borders, rgba, etc.)
>

Yep - agree. If anyone wants to write a WCAG technique (or failure) for
this I'm sure they would really appreciate the submission.


>
> > - Any background CSS colours using rgba values (semi-transparent
> > backgrounds)
>
> WAVE accounts for semi-transparency though there is no defined WCAG
> formula for doing so. Again, this is fairly complex to handle and we
> need to refine this.
>

I'd be really interested in seeing your algorithm for this. I've tried
doing something similar but found that when semi-transparent backgrounds
were used they were usually placed ontop of a background image or a
gradient anyway so the previous issues recurred.


>
> > These techniques are becoming more and more common so these
> semi-automated
> > tools are becoming less and less useful over time.
>
> Which increases the necessity for common sense and manual testing,
> though I realize the limitations for blind users in manual testing
> these visual components.
>

Totally agree. Hopefully we can get to a point where the tools reliably
report any certain errors and flag for investigation any places which could
be errors.


>
> Jared
> > > >