WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Using color to distinguish a visual element

for

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

From: Angela Colter
Date: Mon, Dec 08 2008 12:25PM
Subject: Using color to distinguish a visual element
No previous message | Next message →

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

From: Patrick H. Lauke
Date: Mon, Dec 08 2008 12:30PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

Angela Colter wrote:
> 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.

I wouldn't say so either. If I can't see what is or isn't a link, then
I'm left to either tab my way through the page or worse, if I'm a mouse
user, hover over each individual word until I spot a link.

It's a different matter though if the links are all in, say, a clear
navigation bar. There, their context/position would make it apparent
that they're links. But for in-text links, definitely not enough.

IMHO, of course.

P
--
Patrick H. Lauke

From: Stephan Wehner
Date: Mon, Dec 08 2008 12:45PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

On Mon, Dec 8, 2008 at 11:17 AM, Angela Colter < = EMAIL ADDRESS REMOVED = > wrote:
> 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."

I think Jakob Nielsen explains it well in his Alert Box, "Guidelines
for Visualizing Links". His first item is

"To maximize the perceived affordance of clickability, color and
underline the link text. Users shouldn't have to guess or scrub the
page to find out where they can click."

See http://www.useit.com/alertbox/20040510.html

Stephan

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

From: Waltenberger, Lon (LNI)
Date: Mon, Dec 08 2008 12:55PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

We're not discussing accessibility for blind or deaf users here but for
sighted, low-vision, and color blind users. I suppose we could include
those with not-so-good monitors too. Screen and Braille readers will
announce links.

I prefer to follow Jakob Nielsen's definitions for "standard" and
"convention" found at http://www.useit.com/alertbox/20040913.html.

Users expect links to be blue and underlined because they're that way on
at least 80% of the sites they visit.

If users want their links to appear differently than the conventional,
their browser allows them to control that. It's not as cool or shiny but
it's best to allow as much control to the browser user as possible.

Abusing users by forcing them to mine or scrape pages for links merely
frustrates them and breaks trust.

From: John Foliot
Date: Mon, Dec 08 2008 1:00PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

Angela Colter wrote:
>
> 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.
>

You are completely correct. Insufficient contrast for low vision users,
poor usability for the cognitively disabled are but two issues that jump
to mind. Fail.

JF

From: Patrick H. Lauke
Date: Mon, Dec 08 2008 2:00PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

Waltenberger, Lon (LNI) wrote:

> Users expect links to be blue and underlined because they're that way on
> at least 80% of the sites they visit.

I'd hazard a guess and say that this percentage is a lot lower nowadays.

> If users want their links to appear differently than the conventional,
> their browser allows them to control that. It's not as cool or shiny but
> it's best to allow as much control to the browser user as possible.

Regular users are very unlikely to ever touch those customisation controls.

> Abusing users by forcing them to mine or scrape pages for links merely
> frustrates them and breaks trust.

Agreed.

P
--
Patrick H. Lauke

From: Patrick H. Lauke
Date: Mon, Dec 08 2008 2:05PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

Patrick H. Lauke wrote:
> Waltenberger, Lon (LNI) wrote:
>
>> Users expect links to be blue and underlined because they're that way on
>> at least 80% of the sites they visit.
>
> I'd hazard a guess and say that this percentage is a lot lower nowadays.

to clarify, i meant the "blue" bit.

P
--
Patrick H. Lauke

From: Oscar DeLong
Date: Tue, Dec 09 2008 7:00AM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

My vision is fine, I distinguish between colors just fine but I still
look for links to be underlined. I get extremely frustrated if I find
someone has changed the links and they are not underlined. I personally
believe that all link should be underlined unless, as someone has
already mentioned, they are in a clearly defined navigation box or
location. I do not believe color with hover text is sufficient.
Besides people change the color of text all the time and that does not
always signify a link therefore I would not consider color a definitive
marker for a link.

Oscar

Oscar DeLong
Access Services/Reference Librarian
Ottenheimer Library
Pulaski Technical College
3000 West Scenic Drive
North Little Rock, AR 72118
(501) 812-2718
= EMAIL ADDRESS REMOVED =

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela Colter
Sent: Monday, December 08, 2008 1:17PM
To: = EMAIL ADDRESS 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

From: Emma Duke-Williams
Date: Tue, Dec 09 2008 7:55AM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

2008/12/9 Oscar DeLong < = EMAIL ADDRESS REMOVED = >:
> My vision is fine, I distinguish between colors just fine but I still
> look for links to be underlined.

And what I feel is even more important - though something I think
no-one here would be guilty of - underlining things that aren't links!

Personally, the colour (as long as it's different) , and the absence
of an underline isn't an issue - as long as it clearly stands out in
the page. Hover helps to confirm you've found the right place, but it
doesn't help you find it in the first place. I tend to stick to
default, though - if nothing else it saves the bother of having to add
extra lines to a css file. I take the lazy option on this one. :)

--
Emma Duke-Williams:
School of Computing/ Faculty eLearning Co-ordinator.
Blog: http://userweb.port.ac.uk/~duke-wie/blog/

From: Mike Osborne - AccEase
Date: Tue, Dec 09 2008 2:30PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

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 ADDRESS REMOVED =
w. www.AccEase.com

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela Colter
Sent: Tuesday, 9 December 2008 8:17 a.m.
To: = EMAIL ADDRESS 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

From: Cliff Tyllick
Date: Tue, Dec 09 2008 2:50PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

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 ADDRESS REMOVED =

>>> "Mike Osborne - AccEase" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
w. www.AccEase.com

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela Colter
Sent: Tuesday, 9 December 2008 8:17 a.m.
To: = EMAIL ADDRESS 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

From: Jablonski, James (LNI)
Date: Tue, Dec 09 2008 3:35PM
Subject: Re: Using color to distinguish a visual element
← Previous message | Next message →

Greetings all,

Another consideration is for those who rely on hands-free solutions to
run their computers. Voice recognition is one example.

With the more expensive editions of Dragon NaturallySpeaking (the market
leading software) I can command a link to be invoked simply by saying
the text of the link, *if* I know that a link is there, and how to
pronounce it. With Dragon, if I know the command, I can command "Click
Text Link" and even if I don't know where the links are, Dragon will
find them and number them. I can then command it "Choose x" (where x is
its number for the link I want). This will not work for server-side
links, and it will not work on secured pages. The more expensive
editions of Dragon are very robust. The more affordable editions and
competing products are not necessarily able to do this.

My point is that with the consistency of standard, blue underlined
links, a hands-free user will find the page much more accessible. Folks
who use computers with other input methods like head wands, mouth wands,
switches, sip-and-puff, etc. *really need accessibility*. They are not
going to be using a pointing device to sort of scribble-scrabble over
the screen to see if maybe that colored text, or that underlined or bold
or visually arresting thing holds a secret passage to where lies
something of additional value or function. Consistency is critical.

James
James Jablonski, Assistive Technology Consultant
Washington State, Department of Labor & Industries
= EMAIL ADDRESS REMOVED = (360) 902-5888 FAX (360) 902-6300


-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Cliff Tyllick
Sent: Tuesday, December 09, 2008 1:46 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] Using color to distinguish a visual element

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 ADDRESS REMOVED =

>>> "Mike Osborne - AccEase" < = EMAIL ADDRESS 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 ADDRESS REMOVED =
w. www.AccEase.com

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela Colter
Sent: Tuesday, 9 December 2008 8:17 a.m.
To: = EMAIL ADDRESS 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

From: Patrick H. Lauke
Date: Tue, Dec 09 2008 4:20PM
Subject: Re: Using color to distinguish a visual element
← Previous message | No next message

Jablonski, James (LNI) wrote:
> Folks
> who use computers with other input methods like head wands, mouth wands,
> switches, sip-and-puff, etc. *really need accessibility*. They are not
> going to be using a pointing device to sort of scribble-scrabble over
> the screen to see if maybe that colored text, or that underlined or bold
> or visually arresting thing holds a secret passage to where lies
> something of additional value or function. Consistency is critical.

However, on this last point, those users will use some of their
alternative input device to tab from link to link, and not to move a
virtual cursor, so having a hover/focus state that's clear (or not
interfering with the default browser one) will alleviate the problem of
removing the blue/underline look of links. Again, not that I condone
visually styling links away...just fleshing out this aspect of the
discussion.

P
--
Patrick H. Lauke