WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Minimal style needed to make links accessible?

for

From: Dan Conley
Date: Aug 25, 2010 7:00AM


I think Jared already linked this, but Webaim has a tool:

http://webaim.org/resources/contrastchecker/

Dan Conley
Information Specialist
Center for International Rehabilitation Research Information and Exchange (CIRRIE)
University at Buffalo, Health Sciences Library B6
Phone: (716) 829-5728
<EMAIL REMOVED>
http://cirrie.buffalo.edu


On 8/25/2010 8:57 AM, Tim Harshbarger wrote:
> You should be able to use the Jucy Studio contrast analyzer to determine
> the difference between link and non-link text. The formula that the
> contrast analyzer uses isn't necessarily specific to foreground and
> background colours. The formula basically determines the luminosity
> index of colours and then calculates the ratio between the two colours.
>
> The part I am less certain about is using the success criteria for the
> colour contrast between foreground/background colours to determine if
> there is enough contrast between link and non-link text. Since I don't
> really have a better idea to offer, I guess it will do.
>
> My difficulty with applying the foreground/background contrast ratios to
> link/non-link text is that I am uncertain that the ratios may need to be
> the same. In the case of foreground and background colours, we want to
> ensure there is enough contrast to read the content. With link/non-link
> text we are wanting to ensure there is enough difference between the
> colours that the user can identify that there is a difference.
>
> I think it might be possible that the contrast ratio can be lower, but
> since the other ratio works and I don't have a ratio to suggest, I will
> keep using the ones mentioned in WCAG 2.0.
>
> I only mention this now in case someone else might have information that
> would support using a different ratio or that would help me understand
> that the ratios mentioned in WCAG 2.0 are equally valid for these type
> of situations.
>
> Thanks!
> Tim
> -----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
>>