WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Contrast Checker for rgba Color Values (and hello from anew list subscriber)

for

From: Chagnon | PubCom
Date: Aug 24, 2014 8:31PM

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

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jeffery Brewer
Sent: Sunday, August 24, 2014 2:56 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Contrast Checker for rgba Color Values (and hello from a
new list subscriber)

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)?
messages to <EMAIL REMOVED>