Tips for Website Accessibility Best Practices

Color blindness doesn’t necessarily mean that you can’t see any color at all, or that people see things on a grey scale. It’s actually a decreased ability to see color or to tell colors apart from one another.

“Per NIH, color insensitivity impacts approximately 0.5% of adult women and 8% of adult men.” (US Standards Website)

Red-green color blindness is the most common form, and some rare conditions prevent all perception of hues; therefore, it’s important to think about how we can keep our websites more accessible and inclusive to all people.

Website accessibility is the inclusive practice of ensuring that there are no barriers that prevent interaction with a site by people with disabilities.

Ways to make your website more accessible:

Avoid color-specific instructions: When designing forms, avoid labelling required fields only with colored text; typically, we see it labeled in red. It’s safer to use a symbol cue like the asterisk.

Another example, when designing your forms; avoid green for “message successfully submitted,” and red as an “error” indicator.

Don’t rely on color coding: When designing specific pages, or when including maps and infographics, don’t simply rely on color coding alone — try to use a combination of color and texture or pattern, along with precise labels, and reflect this in a key or legend.

For example, patterns might include dots, dash marks, or lines.

Pay attention to contrast: Light colored fonts on a white or light background are difficult to distinguish as it is; but for a person who suffers from color blindness may not be able to tell the difference at all. Therefore, pay close attention to color contrast throughout your branding and website.

This color contrast check tool gives you the option to enter a color code (hex code) for a background, and a color code for text or font, and it tells you if the color contrast ratio meets the Web Content Accessibility Guidelines 2.0. Use the built-in sliders to adjust your colors until they meet the compliant contrast ratios.

Avoid unlabeled color swatches:

If you’re using colors to filter products, be sure to include the name of the color/product.

For example, H&M does a great job by including the name of the color along with color swatch next to it.

Avoid only having the color name display on hover:

This isn’t ideal because although it’ll appear when someone hovers on a desktop, it won’t appear on a mobile device.

Avoid fancy names:

For example, a name like “grape” to describe a color won’t be useful to a person, as “grape” could be a green grape or red/purple grape.

Use names that accurately describe the image and color of the product.

Write Alternative Text:

Alternative text is a feature that allows you the space to describe what your image is about for the visually impaired or for instances when an image fails to load; written copy will then appear in its place.

This space is also used to tell Google what your image is about, which given particular keywords, has the chance to increase click-through-rate (CTR) and overall traffic to your website by being found in search results.

Image opacity.

Text placed on busy images can also make it difficult to read. Therefore, if you reduce the opacity of the image, this increases contrast and makes it much easier to read and comprehend.

You can also consider having a solid background or a drop shadow effect on the text.

Alignment: Align text to the left for each line to make the text easier to read.

Best Practices

Try not to use:

• Flashing graphics or animations (i.e. something that flashes more than three times in any one second period).

• Parallax (scroll jacking): this is when a background image moves at a different speed than the rest of the content on the page.

To reduce the risk of seizures:

• Keep motion animations to a minimum.

• Reduce contrast for any flashing content.

• Avoid fully saturated reds for any flashing content.

• If you do have rapid flashes on your site – provide a tool or an option to stop it.

For more information on Website Accessibility Best Practices and additional resources, be sure to check out the US Standards Website here.

written by:

Adriana Leos

Chief Creative Officer