Colour Contrast

Colour Contrast Overview

1.4.3 Contrast (Minimum) (Level AA)
Understanding Contrast (Minimum)  | How to Meet Contrast (Minimum)

1.4.6 Contrast (Enhanced) (Level AAA)
Understanding Contrast (Enhanced) | How to Meet Contrast (Enhanced)

1.4.11 Non-text Contrast ( Level AA)
Understanding Non-text Contrast  | How to Meet Non-text Contrast

Some of the colour combinations found on the site are low contrast and are likely difficult for people with low vision to read. Developers must take care to ensure that colour contrast meets the minimum requirements. If the standard scheme does not meet the minimum requirements, then an alternative colour scheme that does meet the requirements should be made available.

Requirements

• Information conveyed using colour is also conveyed using text.
• The colour of the link text differs from the surrounding text by 3:1.
• Avoid placing text over patterned backgrounds.
• Use clear, readable fonts throughout.
• Ensure a luminance contrast ratio between text and background of at least 4.5:1. If the font used is clearly over 14-point bold or 18-point standard size, then the contrast can be as low as 3:1 - but please be aware that point sizes are not the same as pixel sizes and can be difficult to gauge on the web.
• The Digital Accessibility Centre recommends meeting WCAG 2.1 success criterion 1.4.6 for a contrast ratio of 7:1 where possible.

Ensure colour contrast ratios meet the WCAG 2.1 AA standards of:

• 4.5:1 for Standard Text
• 3:1 for Large Text
• 3:1 for Non-Text Elements

1.4.1  Use of Colour (A)

Colour must not be used as the only means of conveying information. Ensure that everyone, including people who are vision impaired, can access information without hindrance.

Tools required

Web Developer extension

1.4.3 Contrast (Minimum) (AA) Contrast

Web pages must have sufficient contrast between text and its background. Read more about contrast ratios.

Ensure that everyone, even people with sight defects, can see the difference between text and its background.

 1.4.6  Contrast (Enhanced) (AAA) Contrast

This Success Criterion intends to provide enough contrast between text and its background that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of colour choices for large text, which is helpful for the design of pages, particularly titles. 18-point text or 14-point bold text is judged to be large enough to require a lower contrast ratio. The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

• 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 is 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.

 Tools required

• WAVE Web Accessibility Evaluation Tool
• Colour Contrast Analyser
• Snook.ca Colour Contrast Check

Notes

Large-scale text is defined as text in a 14pt bold or 18pt font. What this means for text on a computer display varies depending on the font and device used. A good rule of thumb is that 14pt is more or less equivalent to 19px, and 18pt to 24px.

The font size of a certain bit of text can usually be checked using the browser’s Developer Tools (F12): inspect the element containing the relevant text and check its computed font-size value.

Exceptions

• Decorative text that conveys no information.
• A logo or brand name.
• Large-scale text (and images of large-scale text) with a contrast ratio of at least 3:1.

How to test

1. Open the web page to be tested.
2. Review text and images of text on the page, and test the contrast between the text and its background using one of the tools listed above.

• • Using the WAVE Web Accessibility Evaluation Tool: Type or paste the web page address in the field provided and submit. After some processing by the tool, results for the page will be displayed. Select the “Contrast” tab. The elements on the web page with low contrast are highlighted. Note that because the WAVE tool does not account for background images and gradients, etc., there may be false positives. Note the contrast failures identified by WAVE and confirm the contrast using another tool.
  • Using the Colour Contrast Analyser: Click the Foreground dropper icon and select the most representative sample of the foreground colour in question. Click the Background dropper icon and select the background colour. The results are displayed automatically.
  • Using the Snook.ca Colour Contrast Check: Enter the hexadecimal (RGB) code (e.g. #FFFF00) for the foreground and background colours. Note the contrast ratio in the results panel and if it is WCAG 2 AA compliant.