Design Phase

On this page:

On this page:
Visual Design & Colour
User Experience
Movement and Flashing

This page details design considerations that will help you design websites that are user-friendly, intuitive, and above all accessible for everyone. Below are some areas to look out for in your designs that are typically where accessibility errors occur.

Visual Design & Colour

Visual content must be presented so that it is perceivable and understandable by people of differing abilities, including people who are colour blind or have low vision, or people who have cognitive, language and learning disabilities. It must also be presented in ways that accommodate a variety of screen sizes.

Text Colour Contrast

Users who have low vision need sufficient contrast in order to read. Make sure text achieves sufficient contrast against its background.

What to do

Make sure text achieves sufficient contrast against its background
Achieve at least the minimum contrast required for all text placed over images or gradients

An example of body text that meets required contrast guidelines. The text is a black and reads "A higher colour contrast makes anything easier to read."

Minimum contrast for body text (less than 18 point regular or 14 point bold) is a 4.5:1 contrast ratio.

An example of body text that fails to meet minimum contrast guidelines. The text is a light grey and reads "Low colour contrast makes text harder to read."

Don’t use text below a 4.5:1 contrast ratio as this makes it difficult to read.

An example of large text that has sufficient colour contrast with the background. The text is purple and reads 'Hello'

Minimum contrast for large text (greater than 18 point regular or 14 point bold) is 3:1.

An example of large grey text that has contrast of less than 3:1 with its background, the text reads 'Hello'.

Don't use large text that contrasts less than 3:1 with its background.

An image card of a surfer riding a wave in the West of Ireland. There is text overlaid on top that meets minimum contrast guidelines with the background.

Maintain a minimum contrast ratio for all text placed over an image

An example of white text on a purple and pink gradient background, at times it does not meet required contrast between background and foreground. The text reads 'Hello'.

Don't place text on a background that falls below contrast minimums at any point.

Use the tools below to make sure you are achieving required colour contrast in your designs.

Use the Adobe Colour Contrast Checker Tool

Text on image background image a11y check

Visual States for Interactive Elements

Users with low vision need sufficient contrast to perceive the different visual states of a component, such as focused, selected, hovered, pressed, expanded, or checked.

All interactive elements need hover and focus states. This includes buttons, links, text fields, navigation elements, selection items (radio buttons, checkboxes), etc.

While hover and focus states are sometimes treated the same, they actually serve different purposes.

A hover state lets you know something is interactive. If you use a mouse, you can move your mouse over the screen and get a sense of what you can interact with when things are highlighted on hover.

A focus state indicates that an element is ready to receive input. This is different from hover because it’s communicating “you are interacting with this right now” instead of “you could potentially interact with this.” For example, a text field is ready for you to add text.

It is important to design for all of these states as they help people to understand what they are interacting with.

Visual treatments to indicate state changes may just be a difference of colour (such as a button changing hue). Others will involve altering the size or opacity of all or part of a component.

What to do

Make sure visual states for components meet 3:1 contrast with adjacent colours
Make sure focus and non-focus states meet contrast requirements

Three buttons with each in a different state. They are enabled, hover and focus states.

The focus state can inherit the hover state and use a 2px outline.

In this example it is not possible to know what the focus is on because all the buttons look the same.

Three selected checkboxes. The second with hover and third with focus state.

Ensure various states have good contrast.

Don’t use colour alone to convey information

Why This is Important

Information that doesn’t rely exclusively on colour is accessible to colourblind people. Colour by itself is not a reliable way to convey information because colourblind people experience it in many different ways.

Using visual attributes such as shapes, iconography, text, contrast, and spacing makes information accessible to colourblind people.

Part of a form component, the “New Password” text input is highlighted in green with a checkmark icon next to it and the “Confirm New Password” input is highlighted in red with an error icon and helper text that says, “Passwords do not match.” There is a button underneath.

Help emphasise the difference through icons. Using helper text “Passwords do not match” draws attention and explains the error.

Split comparison of a form input for users with protanopia and users with normal vision. Only colour is used to communicate information, the “New Password” text input is highlighted in green and the “Confirm New Password” input in red. For the protanopia side you are unable to distinguish between the two colours.

The difference between red and green is obvious to non-colourblind people, but for some colourblind users they look almost identical. While some people may be able to tell the difference, the subtle change might still lead to confusion and frustration.

Three examples of a top navigation menu. In the first, the current page is underlined to differentiate. In the second, the current page has an outline surrounding the button container. In the third example all of the buttons have an outline button the current page has a noticeably thicker outline.

Adding an underline tab helps the current page stand out in the navigation.

Two examples of a top navigation menu. In both examples the only way to distinguish between the current page is through the use of colour.

Although this may be clear for users who aren’t colourblind. For some colourblind users they will be unable to distinguish between the different colours

In the Colourblind Accessibility Manifesto, they recommend the following rules for designing for colourblind users:

Start with “Why?”
Ask if your design choices consider the needs of people with colour blindness. Changing the button colour on your website may seem insignificant, but it could make that website inaccessible to nearly 8% of men and 0.4% of women who have colour blindness.
Don’t communicate only with colours
Colour can be one element of a differentiator in design, but don’t rely on colour to serve as the only element of distinction.
Design with shapes
Colour-blind users can discern the difference between shapes far more easily than between colours.
Choose the right copy
Avoid identifying tasks or requests to the user only through colour.
Test your designs in black and white
This helps you evaluate the composition and the usability of your designs without the meaning provided by colour.
Rethink button states
Colour alone does not convey information for everyone. Use shapes and icons that indicate a button’s function.
Use contrast
Don’t default to using green and red to communicate things like product availability or pass/fail. Using icons, text, and high contrast colours such as blue and red will help many (but not all) people with colour blindness.
The smaller the item, the bigger the problems
Relying on small, coloured elements to signal important information, like updates or status, creates a huge barrier for colour-blind people.

Link Text Contrast

Users need to easily identify links in content. Removing the underline or not having enough visual contrast with the surrounding text will decrease the discoverability, especially for users with low vision or cognitive disabilities.

What to do

Confirm link text is underlined and/or has a contrast ratio of 3:1 with surrounding text. Achieving both is optimal.
Colour alone must not be used to distinguish links from surrounding text unless the colour contrast between the link and the surrounding text is at least 3:1.
An additional differentiation (e.g. underline, outline, highlight, etc.) should be provided when the link is hovered or receives focus.

Two examples of body text with link text. In the first example the link text is the same colour but underlined. In the second example it is blue with a high contrast to the regular text, it is also underlined.

It is best practice for link text to always have an underline. This follows conventions and user expectations.

Paragraph text with blue link text that has insufficient contrast with surrounding text and background. The link is in its default state.

Don’t remove underlines from link text without sufficiently contrasting with surrounding text (3:1) and the background (4.5:1)

Two examples of body text with link text in a hover/focus state. In the first example the link text is black and underlined. The element has a yellow highlight. The second example has blue text and is underlined. It has a yellow highlight with a blue outline outside the element.

There should be an additional differentiation when a link is on hover or receives focus.

Two examples of body text with link text in a hover/focus state. The colours may look okay to users with normal vision but do not pass contrast guidelines.

Although the hover text may look fine to users with normal vision, these two examples do not pass colour contrast guidelines.

WebAIM: Link Contrast Checker

Be Careful with Forms

Forms are an area in which there are typically accessibility problems caused by the designer.

In recent years we have experienced an oversimplification in form fields. Modern designs have foregone traditional identifying attributes and interactive affordances in favour of a more minimalist approach. Today’s forms typically lack two specific items that are vital for accessibility: clearly defined boundaries and visible labels.

Clearly defined boundaries for form fields are important for users with mobility impairments and those with cognitive disabilities. Knowing the location and size of the click target is important for people using a standard or adaptive pointing device. Users with cognitive disabilities may have difficultly finding and interacting with fields without common visual cues.

Labels tell the user the purpose of the field, are still visible when focus is placed inside of the field and remain even after completing the field. Placeholder text should not be used as a replacement for a visible label.

A search bar with form labels and placeholder text.

A form label should be persistent and always shown.

A search bar with placeholder text instead of a form label.

Placeholder text should not replace a form label as it disappears when a user starts typing.

The Problem with Captcha

Requirements on websites to prove that you’re not a robot (such as to complete a financial transaction, fill in a form, or to sign up to a newsletter), are often not accessible. CAPTCHA is a popular security method used and is generally easy for people with normal eyesight to complete, but it presents a lot of problems for people who are blind, have low vision or use screen readers. Here are some alternate methods that are more accessible:

Email and text message verification codes
The honeypot method — this system tricks bots into making submissions using an invisible form
Logical or mathematical tests — keep the answers to their questions simple so that there is not too much cognitive overload for users.
Offer multiple options that work for multiple types of disabilities

User Experience

The website you design should be predictable and consistent. How each element relates to the system as a whole should be clear and meaningful, to avoid confusion for the users.

Repeated navigation patterns should be consistently presented throughout the interface.
Functionality should be designed to be easily discoverable.
Users should be informed when setting focus on a control triggers a change of context.
Having different ways of navigating and searching ensures that users can easily find what they’re looking for. Consider links and other mechanisms to bypass blocks of content and provide a search function or other features to improve navigation and discoverability.
Use table of contents when appropriate which make it easy for users to see content at a quick glance.

Movement and Flashing

Elements on the page that move, flash, or animate in other ways must be able to be stopped, and should not distract or harm the users.

You should be able to pause, stop, or hide moving or animated content.
Video and audio files should not be set to auto-play.
There should be no flashing or blinking effects faster than 3 times per second.