Foreground Colour, Background Colour and Accessibility

Accessibility standards affect website colour palettes
Web Design - Accessibility
Web Design – Accessibility

Web accessibility standards ensure website visibility

The Web Content Accessibility Guidelines 2.0 (WCAG) advise that you will need to provide enough contrast between text and its background so that it can be read by people with moderately low vision.

There is no specific contrast ratio required for single A compliance. For AA you need to a 4.51 : 1 ratio, for AAA you need 7:1 ratio. For text larger than 18 point or 14 point bold text the ratios are less stringent.

What is a contrast ratio?

This is great – however you are probably thinking what does a contrast ratio of 7:1 mean? There are a few tools that you can use to check these values, however it is probably worth making sure that they use the WCAG 2.0’s luminosity contrast algorithm to ensure compatibility. Most tools will allow you to check the ratios between 2 hexadecimal colours.

Accessibility guideline details

The exact wording for the guideline is:

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)

  •  Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Jordan Thorne
Designer
Date Posted
13th February 2016
Service Tags

Related Blogs

What is a measurement plan and how can it help your business succeed online?

We explain the importance of translating your business objectives into KPIs
22nd February 2017

Speaking in Tongues

The unique challenges of multilingual design
14th September 2016

Progressive Reduction

Simpler, friendlier interfaces
13th July 2015

Sign up for news & updates

x