The contrast between user interface components, graphics and adjacent colours is at least 3:1.

Introduction

All users benefit from a good contrast between the components on your website and the colour around them.

Some users with visual impairments need a stronger contrast than others to fully distinguish and use components, so getting your colour choice right is essential.

How to Pass

  • Ensure user controls have a contrast of at least 3:1 to the colour around them;
  • Where controls change colour on focus or use, ensure the colours used have a contrast of at least 3:1; and
  • Ensure all graphics (for example icons, graphs and charts) have a contrast of at least 3:1 to the colour around them.

Exceptions

  • Where a user interface component is visible but inactive (for example, a disabled button).
  • A graphic is not required for understanding (for example, a chart where labels give the same information as the coloured lines or a decorative graphic).
  • Graphics that are brand logos.

Tips

Remember the different states a component may have and ensure they all comply.

Where form fields use an indicator (for example for missing information), use a colour that meets the contrast criteria.

For graphs, ensure each line or bar has a 3:1 contrast with both the background and the other lines or bars.

For pie charts, ensure each segment as a 3:1 contrast with both the background and the segment either side of it.

See Also

Content retains meaning and function without scrolling. 

Introduction

Some users with visual impairments need to resize text to read it comfortably. 

When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction.

How to Pass

  • Vertical content doesn’t require a horizontal scroll at a width of 320 CSS pixels
  • Horizontal content doesn’t require a vertical scroll at a width of 256 CCC pixels

Exceptions

Multi-directional scrolling is essential for meaning or function (for example images, maps, diagrams, games and components that require toolbars remain in view).

Tips

Responsive web design, where content reflows to fit the user’s viewport, may already mean your website complies with this guideline.

It’s best not to use horizontal scrolling when writing in most languages, as we are accustomed to reading columns of text vertically. Reflow your content into a single vertical column when enlarged.

320 CSS pixels is the same as a default viewport of 1280 pixels enlarged 400%.

256 CSS pixels is the same is a default viewport of 1024 pixels enlarged 400%.

See Also

Don’t use images of text.

Introduction

Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.

Text allows for this kind of personalisation, but images of text almost always don’t.

How to Pass

  • Don’t use an image of text when you can use plain text
  • Display quotes as text rather than images
  • Use CSS to style headings as text
  • Use CSS to style navigation menus as text

Exceptions

  • If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography)
  • If the text is part of an image that contains other visual content, such as labels on a diagram
  • Purely decorative text
  • Brand logos

Tips

You may already comply with this guideline, depending on how you addressed 1.4.5 – Images of Text.

Images of text are subject to guidelines on colour contrast – see 1.4.3 – Contrast (Minimum) and 1.4.6 – Contrast (Enhanced).

See Also

Offer users a range of presentation options.

Introduction

Users with visual or cognitive impairments may need to customise the presentation of your website to understand and enjoy it.

Some users require a certain background and foreground colour to comfortably read text. Others find long lines or justified text difficult to follow and some find it hard to read text where the lines and paragraphs are close together.

As each user has different needs, providing a range of user-selectable options helps the most people.

How to Pass

The following five features are cumulative, as all must be in place to pass:

  1. Provide a tool that enables users to select from several background and foreground colours; and
  2. Ensure text blocks are no wider than 80 characters (plus make sure resized browser windows do not need horizontal scrolling); and
  3. Ensure text is not justified to both sides of the webpage; and
  4. Line spacing is at least space-and-a-half within paragraphs and paragraph spacing is at least 1.5 times larger than line spacing
  5. Ensure text can be resized in a browser up to 200% without requiring the user to scroll horizontally

Tips

Add all visual presentation options to the header of your website, so they are some of the first things users see.

The BBC’s accessibility page has a good range of colour and spacing options to cover features 1 and 4.

Feature 4, concerning line and paragraph spacing, can be difficult to understand, so here’s a more detailed breakdown:

  • Text height must be changeable up to 150% of the default
  • Spaces between paragraphs must always be 150% of the spaces between lines of text
  • Your best bet is to give users some options (like the ‘AAA’ element on the BBC’s accessibility page) of:
    • Default text height, line and paragraph spacing
    • 150% default text height, line and paragraph spacing
    • 200% default text height, line and paragraph spacing

You probably fulfilled feature 5 when you completed 1.4.4 – Resize text.

See Also

Audio is clear for listeners to hear.

Introduction

Some users have difficulties with their hearing and won’t be able to hear your audio content as clearly as others, especially separating speech from background audio.

You can help by ensuring that your audio is clear. If you have pre-recorded audio-only content, keep background noise to a minimum so that the speaking voices can be heard.

How to Pass

  • Make sure your pre-recorded audio doesn’t contain any background noise; or
  • If there has to be some background noise, it’s generally 20 decibels lower than the foreground noise. That’s about four times quieter.

Exceptions

Background noise is acceptable if:

  • The audio isn’t mainly speech (for example, in an audio play, an action scene might have a helicopter blown up by a car)
  • The audio is part of a CAPTCHA element (CAPTCHA is a test that separates humans from spambots and is often used in forms)
  • The audio is you “singing or rapping” (seriously, this is a direct quote)
  • The background sound can be turned off ( but it’s better just to comply than add complexity)

Tips

Record your audio in a place you know will be quiet (a room with lots of soft furnishings is best if you haven’t got a studio).

Only use good quality audio (you should be doing this anyway if you care about your website).

See Also

The contrast ratio between text and background is at least 7: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 getting your colour choice right is essential.

While the minimum contrast for Level AA was 4.5:1, for Level AAA it’s 7:1. This higher standard of contrast helps a wider range of users read your content.

How to Pass

Make sure the contrast ratio between your text and background is at least 7: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 4.5:1
  • If the text is purely decorative
  • If the text 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

You may have fulfilled this guideline when you completed 1.4.3 – Contrast (Minimum).

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

Don’t use images of text.

Introduction

Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.

Text allows for this kind of personalisation, but images of text almost always don’t.

How to Pass

  • Don’t use an image of text when you can use plain text
  • Display quotes as text rather than images
  • Use CSS to style headings as text
  • Use CSS to style navigation menus as text

Exceptions

  • If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography)
  • If the presentation can’t be achieved with the technology used to build the website
  • If the text is part of an image that contains other visual content, such as labels on a diagram
  • Purely decorative text
  • Brand logos

Tips

Images of text are subject to guidelines on colour contrast – see 1.4.3 – Contrast (Minimum) and 1.4.6 – Contrast (Enhanced).

The exception of the website being built in a technology that doesn’t allow the text to be presented as text is removed in the Guideline 1.4.9 – Images of Text (No Exception) at Level AAA.

See also

Text can be resized to 200% without loss of content or function.

Introduction

Some users with visual impairments need to resize text to understand it fully.

To help these users, your website should allow for up to a 200% resize of text without dropping any content or functions. This should be accomplished in a browser and therefore not require any assistive technology.

How to Pass

Users can resize text content in their web browser up to 200% without loss of meaning or function.

Exceptions

  • Images of text (but don’t use images of text, because they don’t resize well)
  • Captions

Tips

As all modern browsers allow for resizing text, a website based on good HTML and CSS should comply.

If your website doesn’t resize correctly to at least 200% in a browser, add a feature that enables users to resize text (by CSS) based on three or four predetermined options, including 200%.

Resizing text is different to zooming in (which enlarges text, images and layout without preserving formatting).

Check your website by resizing to 200% in a variety of browsers.

Make sure your resized text doesn’t require the user to scroll horizontally and you fulfil part of 1.4.8 – Visual Presentation for Level AAA.

See Also

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 getting your colour choice right 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

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

Don’t play audio automatically.

Introduction

Automatically playing sounds can distract and disorientate users, especially those with cognitive impairments.

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

Understanding Success Criterion 1.4.2 (W3C)