Design

The text colour should have enough contrast with its background. This way, the text is easily readable for all visitors. Text must have a minimum contrast ratio of:

These contrast requirements also apply to text on images.

There are a few exceptions for text contrast such as logos, decorative text, and elements that are inactive.

The focus indicator must be clearly visible. The focus indicator shows which part has the keyboard focus. So this is important for everyone who navigates with the keyboard. It is often represented by a visible border around an element.

Each browser has a default focus indicator, but its style features can also be customized. If the style features are adjusted, make sure there is enough contrast between the colour of the focus indicator and the colour of the background. The focus indicator must have a contrast ratio of at least 3:1.

Colour can be used to accentuate or distinguish between different parts of content. For example, it can be used for a warning message on a page, or to distinguish between several lines in a chart. Efficient as it may be, it should not be used as the sole means of conveying information, indicating an action, provoking a response or distinguishing a visual element. Information that is only conveyed with color cannot be perceived (or not properly) by visitors who are color blind or visually impaired.

Also provide other ways like: text, text styles, icons, or patterns. For example, don’t just use a green or red dot, but a green check mark and a red cross. Or use not only a different color per line in a graph, but also place an icon on the line and provide a legend.

Navigation menus and items that appear on multiple web pages must be placed in the same order on each page. Make sure that this order is also the same in the design and in the code.

A consistent navigation and page structure make it easier for everyone to navigate the website and to find information on a page. Visitors who use screen readers can also find their way faster and more efficiently.

Make sure that components that have the same functionality are named the same throughout the website. This makes it easier for visitors to find the repeating parts. This concerns, for example:

By naming components in a consistent way, visitors who use screen readers can find their way faster and more efficiently.