Visual

Identifying Colour Barriers:

• Our vision allows us to make meaning out of the shapes, colours and text we see. But we all have a unique experience of vision. Due to differences in eyesight and the devices we use, no two people ever see things in quite the same way.
• Within our vision, perception of colour varies the most from person to person and device to device. This makes barriers relating to colour likely to impact most of us at some point in our online life.

Contrast:

• Contrast is the measure of how easily a user can tell two colours apart. For example, being able to read text against a background or perceive the edges of a dropdown menu or button.

• At some point, all users will be unable to tell the difference between two colours. This point may occur sooner for older users, users with a vision impairment, or users with low-end devices. Lighting also plays a role. When using a phone in direct sunlight, more contrast is needed for the content to remain visible.

Colour as a way to convey meaning

• Even with great contrast, colour is still an unreliable way of conveying meaning.
• It's best to use colour as an enhancement rather than relying on it being visible to users. If we design our graphs, charts and other graphics to make sense without colour they will be readable to a wider range of users in a broader range of situations. We can achieve this by using different styles of line, different symbols (squares, triangle etc) or shading things in different patterns and colours.
• The same barrier also occurs with elements such as buttons and links. We can sidestep this barrier by adding an underline to our links and buttons which disappears when the user interacts with them. This technique is common. Extensive use was made of this on BBC websites and apps.

Don't rely on colour exclusively

Avoid these:

Red/Green with Colour-Blindness:

Try these:

How to test labels

Labels are something we can test manually. An automated scanner is unable to tell if a label is meaningful.
Most labelling barriers happen with links, buttons, forms and images. But they also arise when media content lacks captions, audio descriptions (for video) and text transcriptions for audio. These 'labels' are known as 'text equivalents. It's not only users who benefit. Search engines use labels to analyse and rank the content of your website. Good labels make your content easier to find.

Other non-descriptive link phrases to avoid comprise:

• Here
• Read More
• More
• Info
• Link to [link destination]

When focused on creating exceptional user experiences, it is better to make your descriptive text unique and relevant.

Use High Contrast Colours

• Ensure there is a high contrast between text and background colors. This helps users with low vision or color blindness to read content more easily.

Font, Text Size and Resizing

• Use sans-serif fonts like Arial or Helvetica for better legibility, as they are generally easier to read on screens.
• Steer clear of script or overly decorative fonts, as they can be difficult for some users to read.
• Use no less than 16px (12pt) text for body copy.
• Use no less than 24px (18pt) text for larger text.
• Use relative units like em or rem instead of fixed units like px to allow users to resize text without breaking the layout.

Keyboard Navigation

• Ensure all interactive elements (like links and buttons) are accessible via keyboard. This is crucial for users who cannot use a mouse.
• Use no less than 16px (12pt) text for body copy.
• Use no less than 24px (18pt) text for larger text.
• Use relative units like em or rem instead of fixed units like px to allow users to resize text without breaking the layout.

Alt Text for Images

• Provide descriptive alt text for all images. This helps screen readers convey the content of images to visually impaired users.

Clear and Consistent Navigation

• Use clear headings and consistent navigation menus to help users understand the structure of your site.
• Consider your CTA colours. For example, using red for a 'CANCEL' button next to a green 'OK' button will not be distinguishable for someone with red/green colour blindness.

Avoid Using Colour Alone to Convey Information

• Use additional indicators like text labels, icons or patterns to differentiate elements.

Forms

• Ensure form fields are clearly labelled and provide instructions or error messages that are easy to understand.

Responsive Design

• Make sure your website is responsive and works well on different devices and screen sizes.

Colour Contrast

• Having identified your colour combinations that don't pass accessibility, utilise one of the colour accessibility tools to find alternatives.
• Play around with the levels to find where the change from fail to pass comes in so you keep as close to your desired colours as possible.

Consistent Navigation

• Make sure you standardise your navigation. Keeping the position, style, colour and terminology consistent throughout your site makes it clear where to click and easier to follow. If reinforcing with icons, ensure they make sense, are consistent and look like part of the same family in terms of style.

Responsive Design (Reflow):

• Periodically check your website on actual mobile devices and tablets as well as using the 'inspect' function in your web browser to emulate a cross section of devices and screen orientations. Look at it through different web browser applications too as they can show variation.
  
  It should be designed from a mobile first perspective as for most websites, more users will be viewing on their mobile device.

Avoid Flickering Content:

• Be mindful that some people are sensitive to flashing or flickering content. Review your website to make sure it doesn't contain elements that could trigger seizures or cause discomfort, whether within video footage or graphic effects.