1. Make it perceivable

Website notifications through a colour blind simulator
cartoon of a man with a disinterested face
“I filled in a really cool form today”
─ no member of the general public, ever.

Prior to Lloyds, I spent years designing products for startups which I thought looked cool. They had light grey type and minimal forms fields. My designs seemed cool when I showed them off to other designers or displayed them against gradient backgrounds in my portfolio.

Looking back, I’m embarrassed with the naivety of this work. Anyone without 20/20 vision, a retina screen, and a broadband connection probably thought my designs were far from cool. They probably thought they were pretty shitty.

To atone for my crimes against colour contrast I’m writing a series about designing accessible web components, then scaling their impact through a design system. If you missed my intro post, here’s a bit of backstory about me and why I’m doing this.

This post focuses on WCAG guideline 1.0: making the components in your design system perceivable. Perceivable means presenting information in a way that people can recognise your content, understand it and consume it in a way that suits them. I am approaching this from a designer’s perspective so I’m focusing on the WCAG criteria that directly affect design.

Use colour responsibly, kids

If you’re lucky enough to be embarking on a design system project from scratch, pay careful consideration to colour choice right from the start. This will save you HOURS of revisions and sadness further down the line.

If you inherit a legacy brand, like I did at Lloyds, I’d recommend doing an accessibility audit of existing design styles. Geri Cody’s short guide to Accessibility Colour Workflows is good place to start.

My team has been fortunate to have our components reviewed by specialist organisations AbilityNet and the Digital Accessibility Centre. However, without a budget you can easily do a lot of testing yourself for free. Here’s the criteria you need to meet and the tools that can help.

Contrast minimum: WCAG 1.4.3 (AA)

Giving text and objects a strong contrast colour against the background makes it easier for people with moderately low vision to read and interact with it. And it’s not just people with low vision that you are helping. Have you looked at your designs on an old PC monitor? How about a smartphone, outside in bright sunlight? 

How can I test colour contrast?

To conform to WCAG guidelines, contrast ratio should be at least:

4.5:1 for text smaller than 24px, or 19px bold.
3:1 for text larger than 24px, or 19px bold.

For example:

This text is #767676 which has a 4.5:1 contrast ratio against a white background.
Aim for this contrast ratio or higher for body copy and small text.

This text is #949494 which has a 3:1 contrast ratio against a white background. 3:1 is the minimum contrast requirement for large text. WCAG specifies large text as over 24px or 19px bold.

These ratios initially scared me (maths!) but contrast ratios are really easy to check. Install a free colour contrast checker. Paste in the hex values of your content and the background colour. The tool will show you the contrast ratio.

I like this free Colour Contrast Analyser from The Paciello Group because it shows values for text and non-text contrast. I recommend you paste in hex values though as the picker is not always accurate. If you design UI in Sketch, you could also try the Stark plugin.

What if the brand colours don’t comply?

If you inherit an existing brand identity, making colour changes can get political. It’s also not uncommon to be landed with pretty colours from an agency that really ‘pop’ in the grand reveal presentation but don’t meet WCAG criteria </sigh>.

Tanaguru Contrast Finder shows you nearest accessible colours to the hex values you’ve entered. I find that by keeping the hue the same and *slightly* tweaking the saturation and brightness you can often find a colour that achieves a better contrast ratio. 

If you can present a solution that looks on-brand but meets contrast ratios then it’s an easier sell. If you have objectors, talk to them about the people who will struggle to buy or engage with your product if you don’t comply. Individual case studies of real people using your product can help here. A slight tweak in saturation and brightness can meet a 3:1 colour contrast ratio without anyone other than the designers really noticing. Don’t tell Brand or I’ll probably get sacked 🙈

Graphic showing text with the original green colour which has a 2.4:1 contrast ratio alongside new text with a 3.3:1 contrast ratio. The new text is easier to read.
At Lloyds we had an apple green colour used for notifications which had low contrast against white. Keeping the hue and saturation the same but reducing the brightness by 10 makes it a lot easier to see. Number of creatives who died from this change = 0.

Read WCAG 1.4.3: Contrast minimum

Use of Colour: WCAG 1.4.1 (A)

The basis of this principle is simple: don’t rely on colour alone to communicate meaning or to distinguish visual elements. It has a WCAG conformance level A so is easy to achieve with a bit of thoughtful design consideration.

Why should I bother when my designs look lovely?

Because everyone sees colours differently. Some people are colour blind or have difficulty telling different colours apart. The most common form of colour blindness is deuteranopia, a red-green colour vision deficiency which according to the NHS affects around 1 in 12 men and 1 in 200 women

How do I check?

Install a free colour blindness simulator and check your designs. I recommend Colour Oracle which shows you how people with common colour vision impairments will see what you have open on-screen.

Nothing beats the first hand experience of testing designs with a colour blind person. Ask around, you’re likely to find someone in your extended circle. Out of curiosity I recently asked a colour-blind person to view some designs through a deuteranopia filter. He said the colours didn’t change which shows the algorithm must be pretty accurate, at least in his case!

Use of colour in a design system

If you see colour, red and green appear visually very different but they can appear almost identical to a colour blind person. Pay careful consideration to notifications like warning and success messages. 

Graphic showing red and green error and success website notification boxes alongside the same boxes viewed through a deuteranopia simulator. The boxes look almost identical viewed through the deuteranopia filter.
Red and green can look almost identical to a person with deuteranopia, the most common form of colour blindness. It’s tough to infer meaning from the notifications on the right.
Graphic showing red and green error and success website notification boxes alongside the same boxes viewed through a deuteranopia simulator.
For notifications, consider using a red and green that have reduced brightness and increased saturation so colour blind people can see a difference. Adding an additional indicator to colour like an icon also helps.

Consider error messages on form fields. Indicating an error by highlighting the form input field in red might score you some spacing saving cool points but is useless to a person who doesn’t see red. Adding an error message and an icon might take up more space and it’s obvious for everyone.

Graphic showing a form input field with an error, alongside the same form error viewed through a deuteranopia simulator.
Adding an icon and error message text might take up space but it’s much more effective than trying to convey the error message using colour alone.

It’s also worth considering the different background colours a component could potentially sit on. It’s easy to assume all components in your design system will sit against a white background but this might not always be the case. If colours in your brand palette don’t have sufficient contrast against white, it might be sensible to suggest some rules for use.

Read WCAG 1.4.1: Use of Colour

Non-Text Contrast: WCAG 1.4.11 (AA)

This criteria says all components and graphics must have a contrast ratio of at least 3:1 against adjacent colours, unless they are purely decorative.

This applies to all elements required to understand the content of a page including:

  • Buttons
  • Icons
  • Charts and infographics
  • Controls
  • States like hover or focus (also refer to WCAG guidelines 1.4.13)

How can I test non-text colour contrast?

Install or use a free colour contrast checker. Use the value for ‘non-text contrast’ or ‘graphical objects and user interface components’ rather than for text. Input the hex value of the object and check it has a score of at least a 3:1 against adjacent colours.

Graphic showing a screenshot of the Colour Contrast Analyser app.
Colour Contrast Analyser from The Paciello Group shows the value for non-text contrast.

What sucks about this criteria

Inactive components and purely decorative elements are not required to meet this contrast ratio. Curiously, the guidance says disabled buttons fall in this category. It’s recently become common practice to disable a form’s submit button until all the fields are filled it. 

I think if a person clicks on a button it should do something. In testing, I’ve seen people repeatedly click a disabled button, wonder why the form hasn’t worked and assume the form is broken. To indicate a button is disabled, inactive buttons are often presented with poorly contrasting text and background. This makes them even less kind to people with low vision. An error message highlighting what a person has missed seems a more thoughtful alternative. 

Mention disabled buttons within the design community however and be prepared for a debate! If you need persuading I recommend reading this article: Disabled Buttons Suck.

Graphic showing a form input field with a disabled submit button, alongside the same form input field with an error message.
Disabling a button until form fields contain the required input can be confusing. To give the appearance of an inactive state, button text often has poor contrast. An error message on click highlighting what’s missing seems a kinder option. But hey, let’s not fall out over this!

Non-text contrast in a design system

Non text contrast was new in WCAG 2.1. At Lloyds we had to revisit our components audited prior to June 2018 which had been measured against the criteria in 2.0. 

The main non-text contrast consideration was the borders on form input boxes which didn’t meet a 3:1 contrast ratio. Other things to check were states – hover, focus, active, etc which need to achieve sufficient contrast. Doing an accessibility audit on your components will red flag these issues.

Read WCAG 1.4.11: Non-Text Contrast

Getting things in the right order

Meaningful sequence: WCAG 1.3.2 (A)

This criteria ensures that if the order of the content is important, the user accesses the content in this order. Remember that a person might be consuming content with the intended visual styling, with CSS styling disabled or listening to it with a screen reader.

Why is sequence important?

If content is well structured it allows people with cognitive and learning disabilities to find and prioritise things on the page. People using screen readers can skip to the main content directly and navigate to sections that are important to them. Keyboard users can browse pages and their sections more efficiently and people with visual impairments have cues that provide orientation on the page and in the content.

My team has recently worked with our vulnerable customer’s team to help Lloyds get accreditation from the National Autistic Society. One of the main takeaways was the need to provide structure, consistency, order, and predictability in layouts and navigation. Ultimately, well-structured content will be better for everyone.

Learn about semantic structure

As a designer for web, I believe it’s essential that you have an understanding of the semantic markup of a web page. It’s easy to think this isn’t your job and something developers need to worry about and I appreciate ‘semantic markup’ sounds boring to designers when compared to a phrase like ‘new Figma plugin’. It’s actually pretty straightforward; puttings content within the right tags, in the prescribed order. 

Getting the page structure right at the design stage will save lots of headaches long term. Along with accessibility, well-structured content will also help search engines find and index your content, making it an easier sell to your boss!

I recommend this quick tutorial on the W3C Web Accessibility Tutorials page. If you’re already dying of boredom just read the sections on headings and content structure.

Meaningful sequence in a design system

The problem with breaking a design down to individual components is they are viewed out of context. Should a promo box that can be used in various places across different screens lead with an H2, H3 or H4? The heading style in this component might need to be flexible. 

Work with designers, developers and content designers who consume your design system to see where components are being used. At Lloyds, our team runs a weekly drop-in clinic where product teams swing by and run us through their journeys. We’re regularly surprised with different applications of the same component, often used in a way we had not considered.

Read WCAG 1.3.2: Meaningful sequence

Finally, a couple of text criteria

These criteria relate to making your content perceivable, rather than focusing on the actual words and how the copy is written. 

Images of text: WCAG 1.4.5 (AA)

As a designer whose career pre-dates web fonts, images of text were once common. Fonts were limited to those that shipped with the browser and the only way of presenting sexy type was to create a picture of it. 

These days, with the huge range of free licensed fonts served by embedding services like Google fonts, there is less need for images of text. They don’t scale, deteriorate in quality when magnified and make life difficult for screen readers and zoom tools. 

If you have to use an image of text that is essential to understanding the journey like a chart or diagram, ensure it goes into development with considered alt text. Please don’t rely on developers to do a content designer’s job!

Read WCAG 1.4.5: Images of text

Text Spacing: WCAG 1.4.12 (AA)

WCAG doesn’t specify a minimum font size because it applies across digital products. A minimum font size viewed in a browser might not render the same on an ATM or smart TV. What it does specify is that the person can view content with the following line height and paragraph spacing:

Line height: at least 1.5 times the font size;
Paragraph spacing: to at least 2 times the font size

Some people use custom css or fonts to improve their web experience. When viewing your content with this spacing, you must ensure content does not become cut off or overlap. This criteria helps people with dyslexia who find it easier to read with extra spacing, along with people who use custom fonts.

Don’t use fixed height containers that cause content to overlap or be cut off when font size is increased. If you’re mocking up a design, experiment with the shortest and longest text that might appear.

Text spacing in a design system

If you maintain a component library in a UI design program like Sketch, pay careful consideration to the line and paragraph spacing applied to text styles. If you don’t specify a value, the tool will offer a default. Retrospectively changing line-height and spacing values can impact the vertical spacing within a component. A few pixels might seem like a minor change but multiplying this over a series components can have a noticeable impact on the vertical spacing of a screen.

Graphic showing two card components. The first has a fixed height so text is cut off. The second expands to allow space for content to be viewed at a line height of 1.5x and paragraph space of 2x.
Avoid fixed height containers that cause content to overlap or be cut off when font size or line height is increased.

It’s tempting to use fixed height containers for components in your design files. These look great in design but don’t accurately describe the experience in code. New smart layout functionality in UI design tools like Sketch 58 finally allows you to make smart components that are vertically responsive depending on the content. Designers can stop partying like it’s 1999.

Read WCAG 1.4.12 Text Spacing

So that’s my roundup of the WCAG 1.0 Perceivable criteria which relate to design. If you’ve read this far, congratulations – you are officially as much of an accessibility nerd as I am! I’ve shared some of the implications these criteria have had on our design system at Lloyds but I’m always learning. As a newbie to web accessibility, if you spot any errors please get in touch and help me improve.

Next up WCAG 2.0: Make it Operable. Follow me on Twitter for updates.

A big thank you to Marged Cother for reading this for me and for making some great content suggestions as part of Amy Hupe’s #10moreblog posts challenge 👊