1. Make it perceivable

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 👊

Sources:

Scaling accessibility with a design system

This is the intro post in a series about my experience of designing accessible web components, then scaling their impact through a design system.

I’m the lead UI designer in a design systems team at Lloyds Banking Group. Lloyds is the UK’s largest retail bank with around 30 million customers. To complicate things further our design system is multi-brand, covering Lloyds, Halifax, Bank of Scotland and MBNA. Any change we make to a component affects all brands, though the upside to this is any accessibility fixes are also multiplied outwards. Through a lot of trial and error we are slowly starting to propagate accessible components at scale.

A cartoon man and woman smiling

Learning, building a community, gaining allies

When I joined the team 18 months ago I’ve got to admit that didn’t really know all that much about web accessibility. In an effort to pull up my socks, and quickly, I’ve been on an interesting journey.

I’ve read extensively about accessible and inclusive design, taken part in user testing and got out into the community at talks and meetups. I’ve nerded my way through the entire Web Content Accessibility Guidelines open_in_new and facilitated reviews of our components with organisations like AbilityNet open_in_new and the Digital Accessibility Centre open_in_new. Most importantly I’ve learned that accessible components don’t necessarily lead to an accessible end product!

Regulatory and legal obligations aside, Lloyds has a genuine commitment to making inclusive products. Accessibility is a high priority within product labs and baked into the workflow. There is an active Accessibility Guild, tools, testing and clinics that as a designer you’re encouraged to take part in.

Ultimately, accessibility is a collaborative effort across disciplines and to succeed we’ve had to get everyone on-board; managers, product owners, designers, developers, and copywriters. We’ve learned how essential it is to build a community around a design system, gain allies within products teams, take onboard feedback, own our mistakes and improve.

A lot of guidance about accessibility is pitched at developers so I plan to write a series from a designer’s perspective; the positive changes you can make from the outset of a project through considered design.

Whilst I’ve learned so much in the past 18 months, I still feel like a bit of a fraud putting my thoughts into a blog. I’m certainly no accessibility expert, just a keen learner. Please call me out on anything I get wrong!

Cartoon picture of ugly duckling

But accessible are products are ugly

Mention accessibility to many creatives and you get a shudder. Hey, I’ve been there.

Aren’t accessible websites ugly colours? Won’t this restrict our creativity? But we’re not allowed to change the brand guidelines! We don’t have room in the sprint for all this extra work. No one with disabilities uses our product anyway. Besides, isn’t accessibility a developers job?

Accessibility is simple. It’s about making sure your product can be used by as many people as possible. It’s about being kind and ensuring that no one is being excluded. As the nerdy kid who was always picked last for the rounders team, I like this idea.

Perhaps it’s just the view from my curated Twitter bubble but it feels to me like the tide is turning. The term ‘inclusive design’ seems to have provided accessibility with a much-needed rebrand which is attracting a hipper crowd. Shouts of design leaders like Tatiana Mac open_in_new, Kat Holmes open_in_new and Mina Markham open_in_new are advocating towards a more inclusive, ethical and kinder web. Even in the wider world, I’m noticing the mean-spiritedness of politicians and authority figures seems to be causing a backlash of kindness. Could kindness and inclusion be the new light grey?

Cartoon of designer glasses

Hey designer, not everyone uses the web like you!

My attitude toward accessibility changed when I first visited DAC, the Digital Accessibility Centre. DAC employs a team with a range of disabilities who are specialists in testing digital products using assistive technology; screen readers, zoom tools and voice recognition software. My team at Lloyds got to met DAC’s testers and learn how they test our web components.

Watching DAC’s Low Vision and Screen Magnification Analyst test our web components changed the way I design. I realised how difficult it was to see a lightweight grey font and interact with low contrast form components. Observing regular users of assistive tech gives a different perspective on the challenges and advantages of tools like screenreaders. Testing for accessibility in an empathy lab or simulation will never afford you the same experience of chatting through journeys with people who regularly use these tools.

We increased the contrast on form field borders after seeing how visually impaired testers at the Digital Accessibility Centre struggled to see where to input information.
We increased the contrast on form field borders after observing how low vision testers at the Digital Accessibility Centre struggled to see where to input information.

Those space-saving Material Design form field labels open_in_new that animate on-click? I saw first hand what a headache these can be for a person using a zoom tool as the label can disappear off-screen as it floats up. And the testers who work at DAC are expert users, familiar with web workarounds and patterns.

Graphic showing how Material Design's form field label animates up into input box.
Material Design form input fields start inside the box, then animate on click to sit inside the input box border in teeny-tiny text. Adding the label above the input box makes the form field more accessible to everyone. Read this post on Why float labels are problematic open_in_new by Adam Silver.

It was a shock to realise I hadn’t been serving my whole audience. As a designer of products that help folks to manage their money, I realised I was doing a lot of customers a huge and frankly discourteous disservice by failing to appreciate the way they access the web. What had I subjected people to in pursuit of shiny things?

Cartoon mobile phone with the accessibility symbol

Getting to grips with WCAG

When I first started at Lloyds I was scared of WCAG. WCAG stands for Web Content Accessibility Guidelines open_in_new and is the benchmark for accessibility standards across digital products. If you’ve ever attempted to grapple with WCAG it is initially an overwhelmingly complex set of guidelines. It’s vast and reads sort of like a legal document, the kind that makes my brain go into “blah blah blah blah blaaah” mode, close my computer and decide to live off-grid in a yurt.

I realised the only way to engage with WCAG properly was to set aside a whole day and read the guidelines end-to-end. I then read through again, noting all the criteria related to design. Once I got to grips with it, I realised it was sensibly ordered by four principles of accessibility. When designing for the web, your content must be:

  1. perceivable
  2. operable
  3. understandable
  4. robust

Each WCAG guideline has a number of success criteria and also a conformance level open_in_new; these levels are A, AA or AAA. Conformance to a standard means that you meet or satisfy the success criteria.

The design system I work on at Lloyds is aiming for an AA level of conformance. AAA is a lot more difficult to achieve, especially with an old legacy system and established brand identity like ours. However, if I was starting a project from scratch, AAA is the standard I would be shooting for. Many big companies and organisations manage to achieve it. Aim high!

I plan to structure my posts around WCAG criteria and how we’ve attempted to meet an AA conformance level at scale through a design system. And the bumps in the road along the way.

Cartoon of a person meditating

A journey to a place of higher contrast and good karma

Have you ever made a design decision at the expense of your users because you thought it looked cool? Ever discounted groups of users because “no-one like that” will ever use your product? If you need redemption then join me on my journey from light grey to a place of higher contrast, accountability, and enlightenment.

First up – WCAG 1.0: making your designs Perceivable. Follow me on Twitter open_in_new for updates.


A big thank you to Marged Cother for reading this for me as part of Amy Hupe’s #10moreblog posts challenge.


Sources:

Thanks for the positive feedback!

Accessibility checklist for designers

Here’s an accessibility checklist I’m working on to help ensure the products I design can be used by as many people as possible. I appreciate accessibility is more than just a checklist of WCAG criteria but as a complete beginner, it’s proving a useful place to start! I’m always learning so if you spot any obvious errors or omissions get in touch and help me out.

Colour

Use of Colour (A)

Don’t rely on colour alone to communicate meaning or to distinguish visual elements. People see colours differently, are colour blind or have difficulty telling different colours apart. WCAG guidelines 1.4.1 open_in_new How can I use colour thoughtfully?

Contrast minimum (AA)

Giving text a strong contrast colour against the background makes it easier for people to read and interact with. The 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. WCAG guidelines 1.4.3 open_in_new How can I test colour contrast?

Non-Text contrast (AA)

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 icons, charts, infographics and controls, along with states like hover or active. Inactive components/states and purely decorative elements are not required to meet this contrast ratio. WCAG guidelines 1.4.11 open_in_new How can I test non-text colour contrast? Install or use a colour contrast checker open_in_new. Use the value for ‘non-text contrast’ or 'graphical objects and user interface components' rather than for text. Related criteria

Focus visible (AA)

It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it. WCAG guidelines 2.4.7 open_in_new How can I make sure there is a visible focus state?
  • Provide a strong visible focus indicator to interactive elements like links, buttons and form fields.
  • The focus state needs to be different to the mouse hover state so the user can visually see a difference.
  • Focus indicators needs a 3:1 colour contrast ratio against the background colour. Use a colour contrast checker open_in_new to check this.
  • If in doubt use the browser default focus indicator.

Copy

As a designer, you often write placeholder copy without thoughtful consideration; button text, link text, headings. Even with a copywriter or content designer on the case these small bits of microcopy often carry through to development. Being thoughtful about your copy from the outset can have a positive impact on the final journey.

Images of text (AA)

Text that is essential to the journey must not be presented as part of an image. Text inside an image cannot be resized and deteriorates in quality when magnified. WCAG guidelines 1.4.5 open_in_new It's easy to meet this criteria
  • Just don't make images of text. It's not 1999. :)

Headings and labels (AA)

Headings must describe the topic or purpose of the content in the section below. Labels must indicate the purpose of the field they relate to. Headings must be used appropriately and nested correctly, only using a capital letter for the first word. WCAG guidelines 2.4.6 open_in_new What makes a good heading or label?
  • Clear and unambiguous copy helps people with reading difficulties to understand the topic and the purpose of the content. It also helps screen reader users to navigate to the relevant sections of content on the page.
  • When laying out your design be thoughtful about how copy is sectioned and how form fields are labelled. Avoiding ambiguity and applying some common sense is helpful to all users.

Layout

Meaningful sequence (A)

Order content in your designs to ensure reading and navigation order are be logical and intuitive. WCAG guidelines 1.3.2 open_in_new Why is a meaningful sequence important?
  • If the order of the content is important, the user must access the content in this order. A person might be accessing the page with the intended visual styling, with CSS styling disabled or listening to it with a screen reader.
  • Learn about the semantic markup of a web page. Ordering content in your designs thoughtfully will ensure screens are structured correctly. This will save time and hassle in development.
Related links

Orientation (AA)

A screen must not be locked to either horizontal or vertical orientation, unless this is essential. Essential applications could be a television screen, a messaging or virtual reality app. WCAG guidelines 1.3.4 open_in_new

Resize text (AA)

It must be possible for people to increase the size of text by up to 200%. This helps ensure that partially sighted people can comfortably read your content. Whilst this change will be made in code, it is worth bearing in mind when designing page layouts. Check that the copy can flow at a larger size and is not constrained by the layout.  WCAG guidelines 1.4.4 open_in_new

Consistent navigation (AA)

If navigation is repeated across multiple pages, all pages must be presented in a consistent manner. A consistent menu and page structure makes it easier for people to learn how to navigate. It also enables people to develop strategies for more efficient navigation, like screen reader shortcuts.  WCAG guidelines 3.2.3 open_in_new How do I make navigation consistent?
  • If your product has a navigation menu or a breadcrumb used on multiple pages, make sure it looks and operates the same way on each page.

Content

Sensory characteristics (A)

Instructions must not rely upon shape, size or visual location. Avoid instructions like “click the red button to continue” or “instructions are in the right-hand column”. WCAG guidelines 1.3.3 open_in_new

Consistent identitication (AA)

If a feature is used in multiple places it must be identified in a consistent way. WCAG guidelines 3.2.4 open_in_new How can I identify features consistently?
  • Label buttons and links consistently throughout a journey, eg, Next or Continue.
  • If form fields have the same purpose they need to be labelled consistently wherever used.
  • Keep icons consistent if they are used for a specific purpose.

Accessibility checklist: Sources: