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.
How can I use colour thoughtfully?
- Provide an additional indicator to colour - a visible border, label, underline or icon.
- If charts and graphics rely on colour then add distinctive, non-colour differences like hatching patterns or directly applied labels.
- Learn about colour blindness
- Install this colour blindness simulator to check your designs.
WCAG guidelines 1.4.1
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.
How can I test colour contrast?
- Install a colour contrast checker. I like this contrast analyser from The Paciello Group because it shows values for non-text contrast. I recommend you paste in hex values though as the picker is not always accurate.
- Or use an online colour contrast checker
- If you design UI, the Starck plugin is well worth the investment.
WCAG guidelines 1.4.3
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.
How can I test non-text colour contrast?
- Install or use a colour contrast checker. Use the value for ‘non-text contrast’ or 'graphical objects and user interface components' rather than for text.
WCAG guidelines 1.4.11
Related criteria
- Focus indicator states
- Icons
- Text in or over graphics
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.
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 to check this.
- If in doubt use the browser default focus indicator.
WCAG guidelines 2.4.7
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.
What if there's no alternative?
If it is essential then ensure the graphic goes into development with thoughtfully written alt tags describing the content. Don't rely on developers to write copy for alt text just because it's in the code. Writing copy is not their job!
WCAG guidelines 1.4.5
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.
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.
WCAG guidelines 2.4.6
Layout
Meaningful Sequence (A)
Order content in your designs to ensure reading and navigation order are be logical and intuitive.
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.
WCAG guidelines 1.3.2
Related criteria
- Semantic structure
- Understanding parsing
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
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 a fixed-width or fixed-height layout.
WCAG guidelines 1.4.4
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.
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.
WCAG guidelines 3.2.3
Sensory characteristics (A)
Instructions must not rely upon shape, size or visual location.
What to avoid
- Avoid instructions like “click the red button to continue” or “instructions are in the right-hand column”.
WCAG guidelines 1.3.3
Consistent identification (AA)
If a feature is used in multiple places it must be identified in a consistent way.
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.
WCAG guidelines 3.2.4
