WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Minimal style needed to make links accessible?

for

From: Kroon.Kurtis
Date: Aug 26, 2010 2:27PM

For the most part, these tools measure contrast between foreground and
background ... which is less useful when you're comparing two _text_
colors viewed against the _same_ background.

If we rely strictly on the test results, fully-saturated blue (#00f) and
black (#000) fail to provide enough contrast. And that's 100% true:
blue text on a black background (or vice versa) indeed fail to provide
enough contrast, _when one is set on the other_.

Consider, however, that this blue is the "classic web link color" ...
and most web-using folks have no problem recognizing it as link text.
Instead, I propose that we evaluate color _difference_. The W3C
considers this to be just a part of contrast, and have removed it from
their officially-recommended algorithm. As a result, the tools I tested
don't report it. (I can't download software, so I can't test the
Paciello Group's tool ... can anyone tell me -- privately, so we don't
clutter the list -- if it does?)

For myself, I set up a spreadsheet in Excel to calculate color contrast.
I created it before the W3C changed their algorithm, so it reports color
differences. However, it uses the old success criteria, which failed
any score lower than 500: the blue/black example would still fail
because it only scores 255. Not a problem: color difference is no
longer normative, so I can redefine success to mean anything that suits.

I'd say anything with a color difference greater than about 200 should
be okay -- purple (#800080), the "classic visited web link color",
scores 256 ... and if it's darkened to the nearest websafe color (just
for grins), it scores 204.

Just something to consider ...

Thanks!

Kurtis Kroon
Web Business Services
State of California Franchise Tax Board
<EMAIL REMOVED>


-----Original Message-----
From: Kinnunen,Daniel (DFPS) [mailto: <EMAIL REMOVED> ]
Sent: Wednesday, August 25, 2010 9:11 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

There is a also very nice contrast analyzer available on the Paciello
group's site
(http://www.paciellogroup.com/resources/contrast-analyser.html),
also linked from the Web Accessibility Tools Consortium page
(http://www.wat-c.org/)

You can select any two colors from a page using the eye-dropper tool.
The fields are labeled Foreground and Background, but if you select one
text color as the foreground, and the other text color as the
background, you will get the contrast ratio between the two text colors.

You can use this tool to test contrast in any application, not just for
content viewed in a Web browser. For example, you could test the text
contrast in a PDF document or any software dialog also.

As an aside, the Juicy Studio toolbar is great, but I have not figured
out how to get it to test contrast for text that is found on top of a
background image. It seems to test only colors specified as text and
background colors in the CSS.

regards,
Dan

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jeevan Reddy
Sent: Wednesday, August 25, 2010 4:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Minimal style needed to make links accessible?

Hi Friends,
Jared Smith has given great explanation on Distinguishable links.
Well, As an Accessibility tester how can we predict the Contrast between
link text and non- text.
Is there any Tool to predict that? Generally i use Juicy Studio
conntrast
analyzer, but it Predicts contrast of text and back ground. Any help is
Appreciated!

On Wed, Aug 25, 2010 at 12:22 AM, Jared Smith < <EMAIL REMOVED> >
wrote:

> On Tue, Aug 24, 2010 at 9:28 AM, Karlen Communications wrote:
> > We would be waving our mice over content looking for "hot
> > spots" we could activate.
>
> Assuming one had a mouse to wave around. Beyond the issues for those
> with some motor disabilities, I also don't have a mouse on my iPhone
> or iPad (assuming I actually owned one - something I do quite often).
> All :hover, :focus, and :active styles are ignored on touch screen
> devices. Additionally, color differences alone can be quite
> unnoticeable until fully zoomed into the text. If I'm just looking for
> 'clickable' elements in a page, the lack of underline could render
> these links invisible to users of these devices despite the fact the
> user may have good vision.
>
> It's quite likely that in a few years as touch devices replace today's
> massive, terribly inefficient computers that generally require both
> keyboard and mouse that the lack of underlined links will be viewed as
> a design faux pas of today. The non-underlined links of today will be
> as the animated gifs of the late 90s.
>
> In the meantime, until designers realize the folly of not underlining
> links, the solution is simply:
> 1. Ensure there is sufficient contrast between link text and non-link
> text. WCAG 2.0 provides a good measure.
> 2. Provide a non-color designator (usually the underline) on mouse
> hover AND keyboard focus.
>
> Jared Smith
> WebAIM