E-mail List Archives
Thread: Link Treatments
Number of posts in this thread: 3 (In chronological order)
From: David Ashleydale
Date: Fri, May 18 2012 3:49PM
Subject: Link Treatments
No previous message | Next message →
Hi,
I love using WebAIM's Color Contrast
Checker<http://webaim.org/resources/contrastchecker/>;to ensure that
there is enough contrast between text and its background,
but I'm wondering if there's a similar mathematical formula for determining
whether there is enough difference in color between the text of a link and
its surrounding text in order for users to recognize the text as a link.
One great visual cue that helps with this is underlining the link (as in my
previous sentence), but what about when the visual design team doesn't want
underlined links?
At first I was tempted to just use the color contrast checker to compare
the color of the text of the link and the color of the surrounding text,
but that doesn't seem exactly right. Black text is fine against a white
background and bright blue text (0000FF) for links is fine against a white
background. I think it's also fairly clear that this difference in color
would be sufficient to tell links from regular text. But 0000FF and black
do not provide enough contrast against each other.
I'm just wondering if there's some other mathematical rule of thumb for
this.
Thanks!
David Ashleydale
From: Keith Parks
Date: Fri, May 18 2012 4:42PM
Subject: Re: Link Treatments
← Previous message | Next message →
On May 18, 2012, at 2:49 PM, David Ashleydale wrote:
> but what about when the visual design team doesn't want
> underlined links?
(I realize this does not directly answer your question, but...)
As a long time graphic designer, my advice is to tell your visual design team to compromise, and accept underlined links. Easily recognizable links are a benefit for everyone. And underlining, as the historical default, is the most meaningful way to distinguish hyperlinks, IMHO.
They can always use CSS to create more subtle underlines than the default underline style. For instance a dotted line that becomes solid on hover/focus.
******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications
http://kparks.deviantart.com/gallery
----------------------------------------------------------
Putting the "no" in "Innovation" since 1988.
From: Jared Smith
Date: Sat, May 19 2012 12:19PM
Subject: Re: Link Treatments
← Previous message | No next message
The WCAG requirement is a 3:1 ratio difference between the non-link text color and the link text color. You can simply put the two color values into the contrast tool to get the contrast ratio.
Jared