E-mail List Archives
Thread: help understanding color contrast
Number of posts in this thread: 6 (In chronological order)
From: Angela French
Date: Wed, May 08 2013 10:39AM
Subject: help understanding color contrast
No previous message | Next message →
Hello,
I am a sighted person using the color contrast analyzer at snook.ca<http://snook.ca/technical/colour_contrast/colour.html>; to test a new web app we are building. I'm mystified by some of the results; sometimes what seems likely to fail in contrast passes, and what seems likely to provide adequate contrast fails. Below is an example.
Our submit buttons are a medium dark green (#54A556) with black font (#000). This passes although I thought it might fail by looking at it.
We have a dark yellowy orange background in a side bar (#F7BB2B) with blue links (#00587D) and this fails on any font less than 18pt even though it looks like it would pass.
I'm wondering what it is I don't understand. Thank you.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/
http://www.sbctc.edu
From: Steve Green
Date: Wed, May 08 2013 10:47AM
Subject: Re: help understanding color contrast
← Previous message | Next message →
The results sometimes surprise me too, but I am inclined to trust the tools more than my eyesight.
Your second example only fails the 4.5:1 threshold by 0.01 so changing the background colour to #F7BB2D is sufficient to pass. The change will be imperceptible.
Steve Green
From: Jared Smith
Date: Wed, May 08 2013 11:25AM
Subject: Re: help understanding color contrast
← Previous message | Next message →
The formula in WCAG creates a defined and absolute threshold. Anything
below the threshold fails and anything above it passes. Of course real
life accessibility doesn't work like this. It's not like a color
combination that marginally fails in totally unreadable or
'inaccessible'.
Common sense is necessary in considering the real end user feedback.
How big is the text? How much text is there? Body text that marginally
passes will cause more issues than heading text that marginally fails,
for example.
So use the guidelines as guidelines, not as die-hard rules. The
formula is not perfect. I'm not sure if it is by design or not, but
reds (orange, maroon, etc.) are much more difficult to meet the
minimal thresholds than most other colors.
Jared
From: Angela French
Date: Wed, May 08 2013 11:29AM
Subject: Re: help understanding color contrast
← Previous message | Next message →
>I'm not sure if it is by design or not, but reds (orange, maroon, etc.) are
>much more difficult to meet the minimal thresholds than most other colors.
>
>Jared
My guess is that perhaps the red/orange "easy fails" are related to colorblindness.
Angela French
From: Roger Hudson
Date: Wed, May 08 2013 2:25PM
Subject: Re: help understanding color contrast
← Previous message | Next message →
Hi Angela,
I looked at some of the apparent anomalies in colour contrast results with
'fluro' colours a while back. You might find this article interesting
http://usability.com.au/2011/10/fluro-colours-2/
Roger Hudson
Web Usability
Web: www.usability.com.au
Twitter: http://twitter.com/rogerhudson
Email: = EMAIL ADDRESS REMOVED =
From: Angela French
Date: Wed, May 08 2013 2:52PM
Subject: Re: help understanding color contrast
← Previous message | No next message
Fascinating. It describes exactly what I was experiencing. I too find the white text on the bright colored backgrounds much more readable. Thanks for sharing.
>
>Hi Angela,
>
>I looked at some of the apparent anomalies in colour contrast results with 'fluro'
>colours a while back. You might find this article interesting
>http://usability.com.au/2011/10/fluro-colours-2/
>
>
>Roger Hudson
>Web Usability
>Web: www.usability.com.au
>Twitter: http://twitter.com/rogerhudson
>Email: = EMAIL ADDRESS REMOVED =
>
>