Web Accessibility Cookbook

Chapter 5. Styling Content

Respecting users and user preferences is one of the most critical aspects of designing and building inclusive UIs. Operating systems and browsers provide users with different options for tweaking UIs and behavior according to their needs. For example, they can change the default font size or reduce motion in UIs. You can query those settings and adapt your CSS accordingly to provide them with an appropriate experience on your website.

Another aspect of inclusivity in CSS is understanding how it influences semantics and operability. CSS is a stylesheet language primarily intended for changing the presentation of HTML elements. Still, some of its properties also affect the semantic meaning of HTML and how it functions.

5.1 Work with Color

Problem

Color is an integral part of web design and user experience. You can use it for styling and decorating or for conveying emphasis, state, and importance. However, not everyone perceives color the same way. If you rely on color alone to communicate, or use colors with low contrast, you may exclude people, especially those with low vision.

Solution

First, use tools to test color contrast. Ensure that text has a high contrast ratio against its background and the background colors of components against adjacent colors (see Figure 5-1).

Figure 5-1. The WebAIM color contrast checker showing a ratio of 4.74:1 for ...