Tag: Distinguishable

1.4.3 – Contrast (Minimum) (Level AA)

Posted on July 31, 2013| By | In Intermediate (Level AA)

The contrast ratio between text and background is at least 4.5:1.

Introduction

All users benefit from a good contrast between the text on your website and the background colour.

Some users with visual impairments need a stronger contrast than others to understand your content, so using the right colours is essential.

How to Pass

Make sure the contrast ratio between your text and background is at least 4.5:1.

Do this by:

  • Using a light background and dark text; or
  • Using a dark background and light text; and
  • Using a colour contrast checker to verify your choice.

Exceptions

  • Text that is 18 points or larger (or 14 points or larger, if bold) has a lower minimum contract ratio of 3:1
  • Text that is purely decorative
  • Text that is an incidental part of an image (for example, a man who is reading a newspaper or a landscape that happens to include a street sign)
  • Brand logos

Tips

In CSS pixel terms, 14 points is 18.5 pixels and 18 points is 24 pixels.

Picking a contrast of at least 7:1 will also fulfil Guideline 1.4.6 – Contrast (Enhanced) at Level AAA.

Remember to ensure that all colours used conform. This includes links that change colour after being used once, and headings in menus and sidebars, as well as the main content.

Make sure that any embedded charts or images of charts have the minimum contrast between elements (for example, bars, axes and labels).

This guideline also applies to images of text (but you shouldn’t be using images of text, see 1.4.5 – Images of Text).

See Also

1.4.2 – Audio Control (Level A)

Posted on October 22, 2012| By | In Beginner (Level A)

Don’t play audio automatically.

Introduction

Automatically playing sounds can distract and disorientate users, especially those with cognitive impairment or relying on a screen reader.

How to Pass

Don’t have any audio that plays automatically.

Exceptions

Although you can technically pass this guideline by adding a pause, mute or stop function to automatic audio, that’s a bad idea. You don’t want users searching around your website for the audio control.

There’s a further exception on audio that plays for less than three seconds. Ignore this too. Three seconds of audio can still distract users, especially those who have problems maintaining focus.

Tips

Don’t be afraid to use audio! It can be great on a website, just let users choose when to play it.

See Also

Use of Colour (1.4.1 – Level A)

Posted on October 15, 2012| By | In Beginner (Level A)

Don’t use presentation that relies solely on colour.

Introduction

Users with visual impairments, including difficulties perceiving colour, may need help where colours on your website present information.

You can solve this by using other identifiers such as labels, shapes and patterns, issue.

How to Pass ‘Use of Colour’

  • Ensure no instructions rely on colour alone
  • Ensure that no information (like charts and graphs) relies on colour alone

‘Use of Colour’ Tips

Check for issues by viewing your website in black and white.  Are there any instructions you can’t follow or is there information you can’t understand?

Making your website accessible to colour blind users is simple. The main area to focus on is giving instructions. Saying things like ‘Click the green button’ or ‘Required fields are red’ is useless to users who can’t see green or red. Reinforce these instructions with at least one more identifying remark.

A common failure is link text. Marking this out with a change of colour alone isn’t good enough, use an underline, bolding or a symbol too.

Another point is to make sure that important graphics are not dependent on colours alone. For example, your users might not understand a pie chart where only colours separate the segments. In this case, you should add clear labelling and patterns to the segments.

There’s an overlap here with 1.3.3 – Sensory Characteristics. Instructions should always be clear and give your users the detail they need.

See Also