Digital accessibility is not a one-off project, but an ongoing activity. That is why guidelines have been drawn up, and they are updated continuously. In this series of articles we explain why digital accessibility matters so much and share insights you can use yourself to meet those guidelines. In the first part we explained why this topic matters to you too and covered the technical side. This second part is about what matters visually.
Visual priorities
Contrast
To make sure that both people with low vision and colour-blind users can see everything clearly, strong contrast is important. The standard is that plain text, meaning normal paragraphs, has a contrast ratio of at least 4.5:1. If text is displayed larger, the contrast may be lower: at least 3:1.
In practice we regularly see house-style colours carried over to the website one to one. That is consistent for the branding, but not accessible.
Take, for example, a house style with orange or yellow. If those colours are used as a background with white text, the text is readable for people with normal vision, but the contrast is too low for people with low vision. One solution is to use these colours only in visual elements that are not essential to the content of the page. That way the content stays readable and the house style still comes into its own.
Wondering whether the colours in your website or application have enough contrast? Then you can use the WebAIM contrast checker.
Consistency
Interfaces such as websites contain many functional elements: buttons, links, input fields. By giving these the same styling throughout, you make it easier for people to understand how something works. That gives an interface a gentler learning curve.
Colour dependency
Colour must not be the only indication that an element is clickable. If clickable elements are indicated by colour alone, it is difficult or impossible for people with colour blindness to navigate a website.
Text links are a good example of this. They are often given nothing more than a different colour from the rest of the text block. A best practice is therefore to underline links or add a visual element to them, such as an icon.
Alternative layout
As we mentioned under the functional priorities, users need to be able to view a website in different ways. A website or application needs to allow zooming in to 200%, for example, without breaking. A read-aloud function and the option to switch to a black-and-white view should not be missing either.
Line height and paragraph spacing
The line height needs to be at least 1.5 times the font size, and the space between paragraphs at least 2 times the font size. There also needs to be enough space between letters and words. Text must not overlap or sit too close together, so users can clearly tell blocks of text and information apart.
Images
With images, it is important that there is no text in the image itself. According to WCAG this is still allowed, as long as good alternative text is provided, but in practice we see that it often causes problems. Websites and applications are usually responsive, which means images are displayed in many different ways, for example landscape on desktop and portrait on mobile. The crop therefore always varies, and text in the image can be cut off. A good solution is to place the text in HTML over a background image, so it is guaranteed to be visible. That works both responsively and for users with reduced vision who use read-aloud software.