Go Back

1.1 Appearance

Introduction

Accessibility is not just about making information available to people with disabilities. It's also about respecting people's preferences, including appearance preferences. Three common appearance preferences are color, motion and size.

Color

Any person, with or without disabilities must be able to perceive content with ease. WebAIM contract checker, Colorable and Stark are just three of the many free tools available to help us follow the WCAG color contrast guidelines.

In case we create multiple themes, we can use the CSS media query prefers-color-scheme that allows us to set the default theme based on the user color preferences.

body {
  background: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

Motion

Modern websites tend to use motion techniques as a way to communicate information. However, some people find them distracting or uncomfortable and others can't perceive the animations at all, particularrly people with cognitive disabilities or slow devices owners.

In spite of the growing desire to create an immersive experience, we must not forget that animations are an enhancement and should not be a barrier to understand the content.

The CSS media query preferes-reduced-motion allows us to respect the user's motion preferences.

.error {
  animation: shake 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .error {
    animation: none;
  }
}

Size

Websites should adapt their content size based on the user's preferences. This can be achieved by using relative sizes instead of absolute sizes.

The relative units rem and em are the best replacments for px. An em is an unit of typography, relative to the font-size of its nearest parent. rem is only relative to the html (root) font-size.

The default font-size in almost every browser is 16px. Assuming that, we can say that 1rem = 16px.

The math is x/16 where x is the pixel value. ex: 24px/16 = 1.5rem

.heading-1 {
  font-size: 1.75rem; /* same as 28px (28/16) */
}

Exercise

Let's wrap up all the 3 appearance preferences in the first exercise. In the exercise page, there are 3 accessibility problems:

🎯 Goal: Make the page follow appearance guidelines.

Bonus

#1 Easier ratio: 1rem = 10px

Doing the math x/16 can be painful when dealing with certain numbers such as 15px (0.9375rem). You may wonder: Why can't 1rem equal 10px? Well, there's a way! Let's set the HTML (root) font-size to 62.5%. It works because 62.5% of 16px is 10px. Now you can do the direct math 1rem === 10px.

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem; /* 16px */
}

.heading-1 {
  /* font-size: 28px; */ /* -- old way */
  font-size: 2.8rem; /* ------ new way */
}

Notes