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

[Laura Carlson]

Hi Greg,

Thank you so very much for the explanation and verification. I think I
may be using your tool a lot in the future.

Best Regards,
Laura

On 3/14/14, Greg Kraus <greg_kraus at ncsu.edu> wrote:

> 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/

>



-- 
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/