E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Alan Zaitchik
Date: Tue, Aug 09 2016 8:10PM
Subject: Chrome Color Contrast Analyzer
No previous message | Next message →

I cannot tell whether certain pages pass or fail the 4.5:1 contrast requirement. Using the Chrome Color Contrast Analyzer I get results such as what is depicted at
http://test.courseware.c4designlabs.com/moodle/screenshot01.html. (This was using a pixel radius of 2, not that other values made much of a difference.)
It seems to me that the text is not really legible. But what counts as "legible" ? Sometimes the text is illegible altogether, but often it is possible to figure it out with some effort. So the test is hardly "automatic".
Does anyone have advice, perhaps a better tool, that can take a fully rendered html page or a selected part of the page, and tell if text is adequately contrastive with its background (at 4.5:1 or 3:1) ? If we keep with the Chrome tool, what criteria should we use to make these judgment calls?
Thanks,
Alan

From: Chagnon | PubCom
Date: Tue, Aug 09 2016 11:52PM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | Next message →

Alan, I'm not sure your sample is an adequate way to test legibility, readability, and contrast of text on a background.

The test in your link is a pixelated, bitmapped graphic of text, not live, vector text that is rendered from scalable fonts (like OpenType fonts). It has large pixels from a low-resolution screen capture that don't adequately mimic the smooth curves of our letter shapes. That's why it's illegible.

All the Chrome contrast analyzer did was assess the values of the white and green colors in your graphic and determine that yes, there is enough contrast between them. It analyzed the pixel colors, that's all.

It did not analyze, however, the readability and legibility of the text; I don't believe any contrast checker can do that, not yet at least.

And given that your test graphic was so poorly made, I doubt it's useful to test anything at all.

Question: is the text on your webpage live, scalable text? Or is it graphical text, that is, faux-text made up of pixels arranged to mimic the shapes of letterforms?

If it's live scalable text, then it's probably ok because 1) The colors passed the contrast checker, and 2) live text is scalable so low vision readers can adjust its size as needed.

If it's graphical text, I assume you know that it doesn't meet accessibility needs at all.

<< If we keep with the Chrome tool, what criteria should we use to make these judgment calls? >>
Common sense? Good taste? A graphic design degree from an accredited school of higher education where someone had courses in color theory and human perception?

There will always be people who will make stupid choices for their fonts, such as the Banshee font for body text https://typekit.com/fonts/banshee-std or bright red text on an intense green background that causes visual vibration for sighted users.

I don't know if it's possible at this state of our technology to develop programs that can assess stupid choices.

But wouldn't that make an incredible app in real life? Sort of like a magic eight-ball for reality held in our iPhone. ...
1) Point phone at boyfriend.
2) Submit question: should I marry him?

Or 1) Upload selfie of yourself in your favorite pants.
2) Submit question: do these pants my butt look big?

Or 1) Direct app to your website URL.
2) Submit question: is the Banshee font ok for body text?

The answer to the last one: Are you nuts? Whatsa da mattah wid you?

--Bevi Chagnon

— — —
Bevi Chagnon | www.PubCom.com
Technologists, Consultants, Trainers, Designers, and Developers
for publishing & communication
| Acrobat PDF | Print | EPUBS | Sec. 508 Accessibility |
— — —

From: Patrick H. Lauke
Date: Wed, Aug 10 2016 2:12AM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | Next message →

On 10/08/2016 06:52, Chagnon | PubCom wrote:

> The test in your link is a pixelated, bitmapped graphic of text, not
> live, vector text that is rendered from scalable fonts (like OpenType
> fonts). It has large pixels from a low-resolution screen capture that
> don't adequately mimic the smooth curves of our letter shapes. That's
> why it's illegible.

Bevi, what Alan posted there was the output of the Color Contrast
extension...it runs over your page and produces this sort of visual
analysis of your page, highlighting areas of high contrast.

I would say this sort of visual test is perhaps of mild use to get an
initial impression of a page, but obviously it lacks any harder
information to actually make a proper assessment. You will still need to
use some other tool (like
https://www.paciellogroup.com/resources/contrastanalyser/ or similar),
feed it the actual color values for your foreground/background colors,
and get back the numeric value of the color contrast, and based on that
tweak your colors accordingly until you pass the contrast threshold.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Alan Zaitchik
Date: Sat, Aug 20 2016 10:01PM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | No next message

I was told that the Chrome Color Contrast Analyzer is the best way to tell if there is sufficient color contrast between text and background color because it actually works off the resolved images that the user will see. But I am not always sure whether the heat map generated indicates a pass or a failure. It's not exactly a binary "legible" or "illegible" that often results.
Can someone help by taking a look at the samples I've arranged at http://52.10.42.88/test/index.html ? Would you consider these passes or failures? I am deliberately not sharing the original html pages since that would influence your ability to comprehend what you see in these heat maps.
If there are other tools as easy to use as this one but which give results easier to interpret as passes or failures, I'm eager to hear what they are.
Thanks,
A


Alan Zaitchik | Senior Technologist / Senior Associate

= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >