E-mail List Archives

Search E-mail List Archives for

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

From: Jeffery Brewer
Date: Sun, Aug 24 2014 12:55AM
Subject: Contrast Checker for rgba Color Values (and hello from a new list subscriber)
No previous message | Next message →

Hello everyone,

I was fortunate enough to attend the WebAIM course in Logan earlier this
month, and then discovered this forum this evening. I'm eager to expand my
knowledge on the subject and hopefully soon start putting my knowledge to
use making the websites I maintain more accessible.

While visiting a site this evening I thought the color contrast in their
main menu was questionable. I certainly had to squint a little to make it
out. So I went to check it out and discover whether it met the WCAG
standards for contrast. As I searched the document trying to discover
precisely which colors they were using I was surprised to find they were
using an rgba color value for the font (rgba(0,0,0,.7)). I don't work with
CSS3 enough to deal much with rgba values, and I certainly didn't think
about them when attending WebAIM class.

The website I'm looking at is http://worldnpa.org and the color contrast
I'm looking at is a font color of rgba(0,0,0,0.7) on a background color of
#7EBEC5

I had to search around a bit for a color contrast checking tool that would
work with rgba, and found one on github by Lea Verou at
http://leaverou.github.io/contrast-ratio/. The tool returns a 10.1 contrast
ratio for this color combination which it claims passes a AAA level for any
size text.

To my eye, the contrast seems very poor however, so I can't help but wonder
if this is a case where the contrast check is just wrong? Is this contrast
as poor as I think it is, or am I just seeing things (or not)?

From: Chagnon | PubCom
Date: Sun, Aug 24 2014 8:31PM
Subject: Re: Contrast Checker for rgba Color Values (and hello from anew list subscriber)
← Previous message | Next message →

It's difficult to tell from your description which colors you're having
problems with.

Viewed the website and I think the medium-blue isn't very readable or
distinctive when used for the hyperlinks. It's a bit weak in the logo/banner
at the top, too.

-BJC

- PubCom.com - Trainers, Consultants, Designers, and Developers.
- Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
Accessibility.
- US Federal Training: www.gpo.gov/customers/theinstitute.htm

From: Patrick H. Lauke
Date: Mon, Aug 25 2014 2:22AM
Subject: Re: Contrast Checker for rgba Color Values (and hello from anew list subscriber)
← Previous message | Next message →

> The website I'm looking at is http://worldnpa.org and the color contrast I'm
> looking at is a font color of rgba(0,0,0,0.7) on a background color of
> #7EBEC5

Having a quick look, it seems that those links are actually set to
rgba(0,0,0,0.5).

> I had to search around a bit for a color contrast checking tool that would
> work with rgba, and found one on github by Lea Verou at
> http://leaverou.github.io/contrast-ratio/. The tool returns a 10.1 contrast
> ratio for this color combination which it claims passes a AAA level for any
> size text.

I think you may have entered those values incorrectly in Lea's tool.
Even using rgba(0,0,0,0.7) it returns a contrast ratio of 5.8 (not
10.1). Entering the actual rgba(0,0,0,0.5) returns 3.3, so well below
the minimum for AA.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Jens O. Meiert
Date: Mon, Aug 25 2014 2:23AM
Subject: Re: Contrast Checker for rgba Color Values (and hello from a new list subscriber)
← Previous message | Next message →

> The website I'm looking at is http://worldnpa.org and the color contrast
> I'm looking at is a font color of rgba(0,0,0,0.7) on a background color of
> #7EBEC5

Just looking at this from a tool perspective I wonder whether WebAIM's
own [1] is more helpful here?

(I collect tools like that on http://uitest.com/, so if anyone has
even better ones, please ping me off-thread. Cheers!)


[1] http://webaim.org/resources/contrastchecker/

--
Jens O. Meiert
http://meiert.com/en/

From: Patrick H. Lauke
Date: Mon, Aug 25 2014 2:37AM
Subject: Re: Contrast Checker for rgba Color Values (and hello from a new list subscriber)
← Previous message | Next message →

On 25/08/2014 09:23, Jens O. Meiert wrote:
>> The website I'm looking at is http://worldnpa.org and the color contrast
>> I'm looking at is a font color of rgba(0,0,0,0.7) on a background color of
>> #7EBEC5
>
> Just looking at this from a tool perspective I wonder whether WebAIM's
> own [1] is more helpful here?

No, as that doesn't deal with alpha/transparency (unless you first
somehow calculate what rgba(0,0,0,0.7) over #7EBEC5 actually translates
to, color-wise...which is not an obvious/simple calculation.

> (I collect tools like that on http://uitest.com/, so if anyone has
> even better ones, please ping me off-thread. Cheers!)
>
>
> [1] http://webaim.org/resources/contrastchecker/
>

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Lewis, Sunshine T.
Date: Mon, Aug 25 2014 9:03AM
Subject: Re: Contrast Checker for rgba Color Values (and hello from anew list subscriber)
← Previous message | No next message

The tool doesn't seem to reliably update the contrast calculation on keypress. However it does generate a unique URL for each calculation so you can verify that it reflects your current input. This is the link for the colors you specified.

http://leaverou.github.io/contrast-ratio/#hsla(0,0%,0%,.7)-on-#7EBEC5. I expect that the link to check .5 will be http://leaverou.github.io/contrast-ratio/#hsla(0,0%,0%,.5)-on-#7EBEC5