Category: color

High Contrast Option for Color Contrast

Most of use are aware of the color contrast guideline in WCAG 2.0 AA which states:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

This can be a big problem for websites when the color scheme uses the brand colors which do not meet the above requirement. This can be especially troublesome for medium orange and green tones.

A technique to meet this guideline is G174:

Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

You may want (or need) to consider this technique for your website, at least temporarily. The control for this option should be in a global nav bar or settings (if available). A longer term goal is to correct your brand’s colors so that it meets the 4.5:1 color contrast requirement.

Here are some examples of websites that have a high contrast option available (the control is in the top horizontal bar in all examples).

partial screen shot of Choice Hotels website; arrows points to text increase contrast
Example of providing an increased contrast setting on a website.

Color Contrast Tools

Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?

More:

color wheel

Round Up: SVG, ARIA, GAAD, WP, Ai Squared

Keep the Underline

Being a web accessibility advocate and practitioner is certainly frustrating at times. Especially when important, foundational best practices get ignored because “the cool kids are doing it”. This was the muse for writing this tweet (for which I was happily surprised to see numerous retweets!):

Just because some big, popular companies make poor design decisions regarding accessibility, doesn’t mean you/your company has to.

You want an accessible, usable website? Then please don’t remove the underline on text links, particularly in the main content (in blocks of text). Unfortunately this design trend continues on the web (and the same could be said about those awful form input labels that act like placeholders, ugh).

Why? For accessibility, users with color blindness or low vision may have trouble distinguishing links from regular text when the underline is missing. Also remember situational disability; links with no underline are usually more difficult to determine when using a poor monitor or when using a computer in a brightly lit environment (since they usually use color alone).

And for usability, it’s just easier to see the links and easier to scan them when they have underlines. It’s also an issue for new users, and people with cognitive or literacy issues (such as dyslexia).

Personally, I’m getting a little older now and my sight’s color recognition is fading a bit. I really don’t like squinting and fighting to find the dark blue links within black text. Don’t make me think!

Some designs have bolded text links instead of underlining in order to differentiate the links from regular text. Bold text can get confused with headings and text that’s bolded for emphasis. And in my opinion, this give a less professional appearance, and still ignores the core convention of underlined text links.

It’s acceptable to remove underlines on text links when other visual cues replaces the underline, such as:

  • Text links in visually explicit navigation bars, dropdown menus, etc.
  • Text links designed to look like buttons (with button functionality and role=button of course!)

Resources

Here are several resources about this issue:

Examples

The following websites have underlined text links in the main content:

Summary

Please don’t remove underlines on text links in main content. Leaving them as intended is better for accessibility, usability, and maintains the core conventions of the web.

Addendum

Check out this follow-up news article on dot net which adds an important point:

the motivation for retaining underlines is “just as much for people with cognitive or literacy issues”

This article was last modified Dec. 2017.

Colorblind, Law, and Lightboxes

Color Sensitive

I usually shy away from About.com, but I recently came across a piece worth mentioning. In the article Are Your Web Pages Color Sensitive? from the HTML/Web Design section, Jennifer Kyrnin provides some good information and techniques for web development with color blindness in mind. Here are some good tips from Jennifer:

  • Don’t use only color to indicate something specific on your page.
  • Desaturate your images to see if they still have impact.
  • Avoid placing red and green together.
  • If you can, find a color blind friend or relative to look at your site.

Did you know that color blindness is an issue with 8 to 12% of males of European origin?

Law Needed

In his blog Yes, we need accessibility laws, Eric Eggert gives an argument for why we need better laws for web accessibility. He states that a good accessibility law should do:

  • Create awareness.
  • Do not create a climate of fear.
  • Create mediations.
  • Reference international standard.
  • Be inclusive.

Lightboxes

In the article Lightboxes and keyboard accessibility from 456 Berea Street, Roger Johansson describes how a lightbox should function with a keyboard. He states:

  • Let me use the left and right arrow keys to step through images in a slideshow.
  • When I press Esc, close the lightbox.
  • Do one of the following:
    • Either add focusable elements (links or buttons) for close/next/previous, put keyboard focus on the first focusable object in the lightbox, make sure I can’t tab to something behind the lightbox, and make it visually obvious which object has keyboard focus.
    • or close the lightbox when I press Tab.
  • When the lightbox closes, return keyboard focus to where it was when I opened it.

In addition, Roger cites the following two articles: