skip to content W3C SVG

Color dependence

Priority: 3

Introduction

Color makes interfaces attractive and can sometimes help to reinforce meaning. For example, red is associated with danger in many Western cultures, and may form part of a ‘delete’ button’s design.

But dependence on color alone to communicate important information runs the risk of alienating a range of users, including those with forms of color blindness, and others with monochrome displays.

In each case color is used to differentiate items, a supplementary alternative method of differentiation should also be present. The convention of underlining inline links, for example, is considered robust. For keys that differentiate bars in bar charts or segments in pie charts by color, embedded patterns can assist comprehension.

WCAG criteria

Scope of the issue

The Join site “Switch now” page “Have your bill handy? Refine your quote” text:

Inline link in green on white with no underline

The Account dashboard Dashboard “Need help?” text:

Inline link in green on blue with no underline

Chart keys

Some charts included depend on color alone for differentiating bars.

Form errors

Form errors are presented differently around the three sites (see Inconsistency). But, in some cases, only color is used to differentiate the error. For example: the Join site Welcome page (pictured).

Red text error

Full list of affected URLs:

Elsewhere, “✖️” symbols are used to mark errors, so there is no problem.

Fixing the issue

By virtue of convention, users expect links to have underlines of some form. Whether these are provided using text-decoration, border, or a linear gradient is another question. The most readable method for the font’s metrics is the soundest choice.

One thing that can improve readability for text-decoration in supporting browsers is the use of text-decoration-skip, which stops the underline intersecting descenders of the font.

a { text-decoration: underline; text-decoration-skip: ink; }

Here is a demo (you should see the effect in Chrome, Opera, and Safari if you use the -webkit- prefix):

Chart keys

It is recommended that linear-gradient based patterns are used to help differentiate the different bars and bar parts. Following is a demo of some gradient options for the My usage page:

Form errors

Use a method to make the error text stand out, such as prefixing the message with <strong>Error:</strong> or providing a warning icon. Should you opt for an icon, ensure it has an accessible label in the form “Error:“.

<label for="postcode">Your postcode:</label> <input id="postcode" name="postcode" aria-describedby="postcode-error"> <div id="postcode-error"> <svg aria-label="Error:" focusable="false"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/icons/forms.svg#error"></use> </svg> Please enter a valid postcode. </div>
  1. The aria-label property provides the accessible label
  2. focusable="false" stops the SVG being focusable in Internet Explorer. This should be applied to all inline SVGs in the Bulb sites.