Accessibility Design Guidelines:

Colour Contrast

colourful flowers
Source: Photo Jess Bailey on Pexels

Why is this Important?

The colour palette that you apply to your website will determine how well a visitor can percieve the content. People with low vision, colour blindness and other vision impairments are affected by the colour contrast between foreground and background elements. Some users will have difficulty distinguishing buttons, text, links and other website elements if the colour contrast is too low.

A designer can help make website content AODA compliant by following the Web Content Accessibility Guidelines 2.0 AA which specify that, the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

    Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

    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.

    Text that is part of a logo or brand name has no minimum contrast requirement.

NOTE: In order to make a website even more accessible, designers can refer to the Success Criterion, "1.4.6 Contrast (Enhanced) Level AAA " which requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text or bold text. However, this is not yet a requirement to meet in Ontario in order to be AODA compliant.

holding glasses Source: Photo by Josh Calabrese on Unsplash

"The minimum contrast Success Criteria (1.4.3) applies to text, including placeholder text, text in images, text displayed when hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast."

WAI, WCAG Read about this Success Criteria.

Best Practices

Designers can implement styling techniques that target certain CSS properties such as line-height, font-size, color, background-color, border, etc. to make websites accessible.

    Don’t rely on color as the only visual way of conveying information, functions or action.

    Always ensure links and buttons have underlines or text labels to communicate its meaning.

    When deciding on a colour scheme for your website, ensure there is sufficient contrast between between foreground and background text.

    Use borders or whitespace to visually separate and distinguish one website block from another.

    In CSS, use the Focus :focus state. This allows the link to be selected using the tab key on a keyboard. 

a[role="link"]:link{
                              background-color: #ffffff;
                              color: #000000;
                              font-size: 1em;
                              line-height: 1.5em;
                              border: 2px solid transparent;
                            }

                            a[role="link"]:hover,{
                            a[role="link"]:focus{
                               border: 2px solid #000000;
                                OR
                              text-decoration-color: #000000;
                            }

Example: using CSS to make hyperlinks accessible by use of colour.

EXAMPLES

Click on the icons below to reveal the corresponding WCAG Success Criteria

Example 1

Colour Contrast Images

If the background is a solid color (or all black or all white) then the relative luminance of the text can be maintained by making sure that each of the text letters have 4.5:1 contrast ratio with the background.

If the background or the letters vary in relative luminance (or are patterned) then the background around the letters can be chosen or shaded so that the letters maintain a 4.5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background. Text that is decorative and conveys no information is excluded. [Ref. www.w3.org]

Read about the Success Criterion 1.4.3: Contrast (Minimum) here.

"The intent of Success Criterion 1.4.3 is to provide enough contrast between text and its background so that it can be read by people with moderately low vision.
To meet Level AA, small text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).
NOTE: Small text is defined as 14 pt (18.66px) or smaller. Large text is defined as 18 pt (24px) or larger."

WAI, WCAG Read about this Success Criteria.
Source: Photo by Євгенія Височина on Unsplash image of flower boquet

Fails WCAG 2.0 AA with colour contrast RATIO: 1.42

Passes WCAG 2.0 AA with large-scale text over 18pts (24px)

. image of flower boquet

Passes WCAG 2.0 AA with colour contrast RATIO: 4.95

Passes WCAG 2.0 AA with large-scale text over 18pts (24px)

Example 2

Contrast and Text

This example refers to the WCAG 2.0 AA color contrast guidelines in links, buttons and text used on webpages. Boldface and underlined links are more visible to users with low vision. Apply well-contrasting colors by placing light text against dark backgrounds or vise versa.

"The minimum contrast Success Criterion 1.4.3: Contrast (Minimum) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast."

WAI, WCAG Read about this Success Criteria.
image of flower basket example pop up icon
Pink Roses Basket

Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.

BUY NOW
Photo by Lizzie on Unsplash

Example 3

Colour Indicator in Forms

This example refers to the WCAG 2.0 AA color contrast guidelines in links, buttons and text used on webpages. Boldface and underlined links are more visible to users with low vision. Apply well-contrasting colors by placing light text against dark backgrounds or vise versa.

"The intent of Success Criterion (1.4.1) is to ensure that all users can access information that is conveyed by color differences, where each color has a meaning assigned to it. Examples of information conveyed by color differences: using highlighting on form fields to indicate that a required field had been left blank."

WAI, WCAG Read about this Success Criteria.
Great!
Great!
@

The Success Criteria for Colour and Contrast

Who Does This Benefit?

user IconUsing Keyboards for Navigation

book IconReading Disabilities

vision IconVisual Impairments

computer IconScreen Reader Users

brain IconCognitive and Learning Disabilities

The Related WCAG Success Criteria

1.4.1 Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

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:
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. (Level A)