WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using color to distinguish a visual element

for

From: Cliff Tyllick
Date: Dec 9, 2008 2:50PM

More anecdotal evidence for consistency: At a nonprofit where I volunteer, I'm having to expand my professional abilities to include CSS mastery. The main driver? Not the poor styling of headings, not the crummy font used as body text, but the styling of links. On the main pages, they look just like text. (On second-tier pages, oddly enough, they look like *underlined* text.)

Among the hundreds of folks who have used this Web site, I have yet to encounter one who knows that there are links in the body of each page.

Keep it simple. Be consistent.

Cliff Tyllick
Web development coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512-239-4516
<EMAIL REMOVED>

>>> "Mike Osborne - AccEase" < <EMAIL REMOVED> > 12/9/2008 3:27 PM >>>
Some time ago I observed a tester with cognitive impairment trying to
navigate a site. She had been taught that a link could be recognised as
having blue text with underline. It was heartbreaking to watch as this
tester tried to establish a link and navigate the site - given that links
were represented differently in the top menu, main menu, left hand
navigation, right hand news/highlight items and of course the footer - let
alone the body text.

Base principle of usability is consistency - blue underline is consistent.

I find it interesting to note that the major money-making sites on the Net -
e.g. Amazon, Google stick to blue underline.

Unfortunately usability.gov does not.

Regards
Mike Osborne

AccEase Ltd
p. 04 934 2821
m. 021 675 010
e. <EMAIL REMOVED>
w. www.AccEase.com

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Angela Colter
Sent: Tuesday, 9 December 2008 8:17 a.m.
To: <EMAIL REMOVED>
Subject: [WebAIM] Using color to distinguish a visual element

I'm in the middle of conducting an accessibility review on a nonprofit's Web
site using WCAG 2.0 guidelines, and I'd like some opinions regarding whether
a component passes or fails a guideline.

The site uses hyperlinks that are styled blue, but not underlined (or bold
or anything else that distinguishes text from links.) However, the site DOES
include a hover state for links. When you mouse over a link, the underline
appears.

Guideline 1.4.1 states that to pass, "Color is not used as the only visual
means of conveying information, indicating an action, prompting a response,
or distinguishing a visual element."

So here's my question: Is the hover state enough to qualify as a
distinguishing visual element? Frankly, I don't think so. If you assumed all
the blue on the page is just text, or don't notice the difference between
blue and black text, you might not bother to mouse over and trigger the
hover state.

What do you think?

Angela Colter
Senior Usability Specialist
UserWorks
301-431-0500