WCAG 2.1 – What is Non-text contrast?

In our ongoing series we’re continuing to look at the new WCAG 2.1 criteria, which is the current standard from the World Wide Web Consortium (W3C) of testing websites for accessibility. These new criteria have been created to meet the needs and demands of current websites, and it’s important for us to understand these new requirements.A variety of common graphical icons.

Text Contrast and auditing

Colour contrast is an important part of the WCAG guidelines and forms a considerable part of Dig Inclusion’s testing methodology. In WCAG 2.0, there was only one rule relating to contrast, 1.4.3 – Contrast (minimum). The Contrast (minimum) criterion specifically concentrated on text to make sure it could be seen by individuals with moderately low vision. The contrast ratio for text had to be a minimum of 4.5:1 for standard sized text, and 3:1 for large sized text. Large sized text is 18 point regular or 14 point bold text.

The issue with this requirement is that there are many elements of a web page that are not text based. Take for example the borders of a table, the colour of a button or tick box. These are common elements on web-pages but under the 1.4.3 criterion, only the text within those items, and not the item itself, could be tested. Likewise, there are some graphical objects, such as print or share buttons that are commonplace but could not be tested on the previous guidelines.

1.4.11 – Non-text Contrast

In order to be able to overcome this problem, the W3C added criterion 1.4.11 – Non-text Contrast to WCAG 2.1. The Non-Text Contrast success criterion states:

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent colour(s):

User Interface Components
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

The main point is to make sure that people with moderate vision loss can identify an item that is to be interacted with, including buttons and form fields. Otherwise, a user may, for example, end up trying to send incomplete forms or not being able to identify the button to submit a completed form.

Graphical Objects

A graphical object is one that conveys information about a particular action without text being used. Examples of this might be a print, save or share button. However, it may also include more complex images, such as graphs or pie charts.

While alternative text on a graphical object would allow a screen reader user to know what the graphical object represents, a user with moderately low vision who does not use a screen reader may have difficulty interpreting the graphical object. Just like other web features previously mentioned, such as buttons or form fields, graphical objects must also have a contrast ratio of 3:1.

Working examples: components

Two sets of form fields. The left set does not meet contrast requirements, but the right set does.

Above we have two sets of forms, where two issues have been corrected. Both the border of the form fields and the submit button have been changed to be darker and therefore clearer to those with moderate vision loss. This has increased the contrast ratio of the field border from 1.4:1 to 3.5:1 and the submit button from 2.9:1 to 4.6:1.

An example of two buttons, one with a grey outline.

Here we have an example of a button that changes only by its outline when it is focused or hovered over. A designer may decide that a button shouldn’t have an outline, for a number of aesthetic reasons. However, there needs to be a noticeable difference of the button in its hovered state and must be at least 3:1. In the example above, the outline has a ratio of 3.5:1.

Working examples: graphical objects

Two download images. One green and one grey.

Above is an example of a common graphical object: a download button. It is possible that a company may have chosen the green download image for company branding. However, against a white background, the green download object has a contrast ratio of 2.5:1. The grey icon has a contrast ratio of 3.9:1, meaning that it meets the criteria. However, there are many colours that would meet requirements and sometimes choosing a dark gradient isn’t always the best option.

Two Facebook share buttons. One is grey and one is blue.

While logotypes are exempt from the non-text contrast requirements, social share buttons are a common graphical object and we believe they should be tested in order to help people with low vision interact and share a website or page.

Facebook have very good branding guidelines, and against a white background both their grey and blue share icons meet the contrast requirements. However, against a light grey background the grey Facebook logo falls below the requirements. This could happen if the share logos are in a footer or side section, and shows that sometimes colour may actually benefit a graphical object.

It’s important to note however, that where there is a object with more than one colour, all adjacent colours must meet the contrast requirements. That is to say that we test both the white of the ‘f’ with the blue circle, and the blue circle against the background. This could also happen with graphs and pie charts, where multiple colours are adjacent to each other.

Exclusions

There are some times when colour contrast can never be met and therefore the non-text contrast criterion will not apply. Examples of this include pictures or paintings (although of course they could include a caption or alt text), educational images and disabled features that no one can interact with. As always, logotypes and branding are exempt.

Conclusions

Suitable text contrast has always been a requirement under WCAG, but the new 2.1 requirement adds the needs for suitable contrast of 3:1 on non-text elements, including components and graphical objects.

All adjacent colours need to be taken into consideration, which may include numerous options in the case of graphs or pie charts. However, pictures are exempt from these contrast requirements and logotypes or branding also do not need to meet the criterion.

Does your website meet WCAG 2.1?

You may never have had your website tested, or you may have had it tested under the old WCAG 2.0 standard. While the WCAG 2.0 standard is good and still stands, it’s important to make sure that every area of a website can be understood, interpreted, and interacted with by all your users.

Feel free to contact us at Dig Inclusion to talk about making your website WCAG 2.1 AA compliant.