[Athen] Color Contrast Analyzer for Text in Images, Gradients, and PDFs

Greg Kraus greg_kraus at ncsu.edu
Fri Mar 14 05:27:05 PDT 2014


Hi Laura,

That is correct. What is happening with that text is that there are
portions of the background that provide enough contrast with the text,
but there are parts that don't provide enough contrast. Basically, the
light green in the background provides enough contrast but the dark
green does not.

One solution I have seen to this is to do something like our
university home page does.

http://www.ncsu.edu/

They put a semi-transparent background behind the text to ensure the
text portion is readable, but it doesn't detract from the picture.

FYI - I am about to upload an update to the tool to fix a bug. Newer
versions of Chrome are throwing a silent error that actually prevent
you from changing the WCAG level and pixel radius. I am uploading it
this morning, so it should be available within a few hours.

Greg

--
Greg Kraus
University IT Accessibility Coordinator
NC State University
919.513.4087
gdkraus at ncsu.edu
http://go.ncsu.edu/itaccess


On Thu, Mar 13, 2014 at 4:34 PM, Laura Carlson <lcarlson at d.umn.edu> wrote:

> Hello Greg and everyone,

>

> On 10/30/13, Greg Kraus <greg_kraus at ncsu.edu> wrote:

>

>> I've developed a tool to help analyze text color contrast problems for

>> text in images, over top of gradients, and in PDF documents. It's

>> available as a Chrome Extension. Feel free to use it and if you have

>> any feedback I'd greatly appreciate it.

>

> I am using the Color Contrast Analyzer for Chrome [1] to try to

> determine if text over a background image is compliant with WCAG AA.

>

> The text in question is a paragraph in a carousel on top of a textured

> background image at:

> http://d.umn.edu/2013/user-tests/home_021014.php

>

> It has a font-size of 0.875em (Cabin 14px normal) so I choose WCAG AA,

> Small Non-Bold (4.5:1) in the tool.

>

> The text in the carousel is one of the following:

>

> * "It's not just where you'll live. It's where you'll make friends,

> pursue dreams, and create memories. And it's at UMD, waiting for you."

>

> * "maurices has donated one of its headquarters buildings in downtown

> Duluth to UMD. The four-story, 75,000-square-foot building, located at

> 105 West Superior Street, houses offices, a large auditorium,

> conference rooms, and skywalk access."

>

> * "Listen to LIVE FROM SOCHI, weekdays Feb. 7-24, on KUMD at 7 am and

> 11 am. Alumnus Cory Salmela is at the Olympics and will provide info

> and updates on competitors and coaches with UMD and Minnesota

> connections."

>

> Screen shots of the 3 resulting Color Contrast Analyzer for Chrome tests are at:

>

> http://www.d.umn.edu/~lcarlson/umd_test_2014_02a/images/maurices.png

> http://www.d.umn.edu/~lcarlson/umd_test_2014_02a/images/housing.png

> http://www.d.umn.edu/~lcarlson/umd_test_2014_02a/images/sochi.png

>

> If I understand the way the tool works, the results is a mask that

> shows outlines of all of the elements that pass the conformance level.

>

> I do not see outlines around all of the paragraph text and this would

> translate to a WCAG AA failure of 1.4.3 [2]. Is this correct? Or am I

> using the tool or interpreting the results incorrectly?

>

> Thank you. And a big thank you to Greg for creating this tool. It

> fills a great void.

>

> Best Regards,

> Laura

>

> [1] https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll

> [2] http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

>

> On 10/30/13, Greg Kraus <greg_kraus at ncsu.edu> wrote:

>

>> I've developed a tool to help analyze text color contrast problems for

>> text in images, over top of gradients, and in PDF documents. It's

>> available as a Chrome Extension. Feel free to use it and if you have

>> any feedback I'd greatly appreciate it.

>>

>> Download from the Chrome Store:

>> https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll

>>

>> Blog Post:

>> http://accessibility.oit.ncsu.edu/blog/2013/10/29/color-contrast-analyzer-for-chrome-text-in-images-gradients-pdfs-and-more/

>>

>> Thanks.

>>

>> Greg

>>

>>

>> --

>> Greg Kraus

>> University IT Accessibility Coordinator

>> NC State University

>> 919.513.4087

>> gdkraus at ncsu.edu

>

>

> --

> Laura L. Carlson

> Information Technology Systems and Services

> University of Minnesota Duluth

> Duluth, MN U.S.A. 55812-3009

> http://www.d.umn.edu/itss/training/online/webdesign/




More information about the athen-list mailing list