Visual design

Meet colour contrast guidelines

To ensure our designs are legible and inclusive, visual elements and designs which hold information or serve a functionality must meet the colour contrast ratio of 4.5:1 to meet the WCAG 2.0 AA standards and a 7:1 ratio for AAA. Always aim for AA and stretch to AAA where possible. This is a rule of thumb for all UI and visual components, below we go into detail on how this applies to each element.

There are really useful tools which you can use to take the guess work out of it these include the [Stark plugin](https://www.getstark.co/pricing) for sketch or [color.review](https://color.review/) online.

Text legibility

Any text whether on a white background, overlaying an image, or gradient must meet the colour contrast ratio set out by WCAG. There are different ratios for different text sizes see below for reference.

Text on images or gradients

Irrespective of context, text should always meet the 4.5:1 ratio. Meaning when text overlays an image or a gradient the contrast must still be met. Images and gradients tend not to be a solid fill colour, therefore it can be tricky to know what colour to test against. A useful tip is to test the colour of the text against the lightest point of your image or gradient if the contrast is met at the lightest point then you’ll know for sure that the text is legible wherever it is placed.

Icons

Icons that are classed as informative or functional must conform to colour contrast ratios when placed on a white or coloured background. When icons are purely decorative and are only there for aesthetic purposes, the colour contrast doesn’t need to be met however it is still best practice.

Links

Ensure the colour of any link passes the 4.5:1 contrast ratio. You also can’t rely on colour alone for the styling of a link - (see never use colour only) . As a general rule of thumb, adding an underline to a link helps to add another distinguishable factor separate to colour.

Focus and non-focus states

The difference between your focus and non-focus states must be noticeable and mustn’t rely on colour alone, try using an outline or underline as well. The colour of your focus and non-focus states must both meet the colour contrast ratio of 3:1.

Charts and other data

All colour in charts and infographics must meet the colour contrast guidelines. You mustn’t rely on colour alone to show a link between items there must be another visual link between categories. See example below:

Never use colour only

Colour blindness effects around 1 in 12 men and 1 in 200 women (roughly 4.5% of the UK population) therefore we mustn’t use colour on it’s own to distinguish elements of our designs or convey information because those with this deficiency won’t be able to tell the difference. You must show the difference using another styling technique which is separate to the use of colour. An example would be underlining your in-line links as well as giving them a different colour.

### It’s a type thing, you wouldn’t ampersand… …but everybody really should so keep to these guidelines to make our text legible to all users:

any body copy should be 16px minimum

character line lengths mustn’t exceed 80 characters

line heights must be 1.5x the font size

use spacing an headings to visually group information

any hyperlinks must be visually different from the rest of the text

Text legibility

All text should be legible and although there is no official minimum font size defined, it is best practice to use 16px for body copy at any screen size. Some text will be smaller, and headers will be larger, but for the main body text (like what you’re reading right now) is usually 16px.

Typography

All typography styles should be legible. Choose a common font most readers have come across before, avoid speciality display or script fonts. Character line lengths mustn’t exceed 80 characters and line heights must be at least 1.5x the font size.

Text page hierarchy

All page layouts should follow ‘F’ and ‘Z’ text hierarchy page rules. Use spacing and headings to clearly group information. Any headings must conform to a type hierarchy and must be marked up as a header in the code so that it’s identifiable by screen readers, bolding out body copy to signify a heading won’t do.

Hyperlinks

rest of the copy on the page. Seeming as you can’t rely on colour alone, as a general rule of thumb, make sure you underline your hyperlinks as well.

Font variations (italics, underlines, etc.)

Often, words that have special status are indicated by changing the font family and /or bolding, italicising, or underlining them but these are not visible by those with low-to-no vision. Therefore, any text styled with italics, highlighting, different font faces, or all caps are visually conveying meaning that needs an accessible equivalent. Work with UX writers to decide if the styling is appropriate and flag it with a role in your designs so that developers can code the appropriate semantic meaning.

Avoid using italics or all caps for large chunks of text which can reduce the readability of the content.

### Image-ine all the people… …yes ALL the people. Images and tables are versatile and can be used for many purposes however not everyone is able to see them so therefore we must:

make informative and functional images accessible by another means

avoid images of text where text can be used

use one action for tables

Functional images

Sometimes we use images which also have a secondary functionality, think of social icons or logos which link back to the homepage. Don’t assume that these functionalities are common knowledge to users because they might not be and users with low-to-no vision won’t be able to see the cues at all.

Therefore, if an image has another functionality than being purely decorative, then this function must be actionable by other means. In the example of a logo which is also used to link back to a homepage, make sure the code is marked up as ‘homepage link’ so this action is identifiable by screen readers as well.

Informative images

It’s useful sometimes to present complex data or information as part of an image to highlight key points or show trends. However, these images are of no use for those with little-to-no vision. Therefore if the information presented in the image isn’t listed elsewhere on the page, in adjacent text for example, then it must be available via another means. One way to provide this would be using ALT text to describe the key information the image depicts.

Do not use images of text if text can be used

If you can build the text into the page then you absolutely should so that it’s more accessible for screen readers to read. It also helps with SEO which is a bonus. If the text can’t be built into the page and must go in an image, ensure it is accessible via another means such as ALT text.

One action tables

Reduce the number of actions, CTAs or links that are within one row of a table, try keep it to one per row. This is beneficial for all users and gives them that clarity we’ve previously spoke about but this is especially beneficial for keyboard only users who might be tabbing through as it reduces the number of actions needed to get to where they want to be.

Properly notate nested table headers in complex tables

When you need to design complex data tables (i.e. one that has more than one level of row or column heading) make an explicit note of the levels or spans in the design.

If possible, it might be worth restructuring the information or splitting complex tables into smaller more simple tables.

Custom components match the ARIA authoring practices keyboard guidelines

If you are creating or designing custom components, make sure you work with and specify to front end developers that the custom component must match the ARIA authoring practices in line with keyboard guidelines (i.e. the name, role and value of that component).

### On top form… Form filling and question sets are an essential part of each business that sits under the MSMG umbrella and so we must do the following to ensure our users are getting the clarity at this stage:

locate any labels near their input

flag groupings of inputs

locate dynamic content near their trigger

Labels near input

Ensure all field labelling is close enough to the input for users to connect relation and to give them the clarity of what it is they need to input. If the input and labels don’t correspond then users are likely to get confused and enter the wrong information which is frustrating for everyone.

Locate dynamic content near it’s trigger

Similar to the above, if a user’s actions have triggered a change to the design then the change must be located near the trigger. A good example of this would be error messages, these should sit in context of the field and not elsewhere on the page so it’s clear for all users which field this error corresponds to.

Flag groupings of inputs

If a number of questions or inputs feed into an overarching category, like personal information, group them together for ease of flow.

Overlays and tool tips

These should be visually distinguishable from other content so they’re easy to access. If you’re using colour to help highlight these, conform to the colour guidelines. Overlays and tool tips must also be marked up in code so that users with visual impairments are able to access these.