WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Lewis, Sunshine T.
Date: Aug 25, 2014 9:03AM

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

-----Original Message-----
From: Jeffery Brewer [mailto: <EMAIL REMOVED> ]
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)?



@ItsWorkingFL
[What's Working Today]<https://twitter.com/ItsWorkingFL>



The Department of State is committed to excellence.
Please take our Customer Satisfaction Survey<http://survey.dos.state.fl.us/index.aspx?email= <EMAIL REMOVED> >.