WebAIM - Web Accessibility In Mind

E-mail List Archives

Contrast Checker for rgba Color Values (and hello from a new list subscriber)

for

From: Jeffery Brewer
Date: Aug 24, 2014 12:55AM

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