Go back Solution

1.2 Appearance

Introduction

Accessibility (A11Y) is more than making information available to people.

As web creators we should respect people's preferences, so that they can perceive the content with ease, regardless of their abilities.

Let's start with the three most common appearance topics: color, proportions and motion.

Color

Color contrast is the biggest A11Y issue, yet one of the easiest to fix, by following the WCAG color contrast guidelines.

Our vision can be highly dependent on our environment (e.g. looking to the phone screen under the sun is harder than inside a building). That's one of the reasons why color constrast is such an essential topic regardless of someone's vision ability.

My favorite color tools:

Proportions (size)

It's out of our control to know the exact size or font that will be presented to people because a webpage can be consumed in multiple mediums.

For that reason, it's safer to think about proportions instead of sizes when building interfaces. This can be achieved by using relative units instead of absolute units for text size.

The relative units rem and em are the best replacements for px. An em is a unit of typography, relative to the font-size of its nearest parent. A 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.

.title {
  /*font-size: 24px; ---- old away */
  font-size: 1.5rem; /* - new way: 24/16 */
}

Math simplified: The math x/16 can be painful when dealing with certain numbers. (eg 15px equals 0.9375rem). We can simplify that by setting the root size to 62.5%, which means 1rem equals 10px.

html {
  /* 62.5% of 16px is 10px.  */
  font-size: 62.5%;
}

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

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

Motion

We tend to use motion techniques as a way to communicate information. However, some people find them distracting or uncomfortable. Others can't even see the animations, particularly people with cognitive disabilities or slow devices.

Remember that animations are an enhancement and should not be a barrier to understand the content. Creating immersive experiences can't be an excuse to bypass accessibility.

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;
  }
}

Or, even better, take a "no motion by default" approach where animations are added on top.

.error {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .error {
    animation: shake 400ms;
  }
}

The main practical difference between both approachs is that the animations won't run in old browsers (usually means slower devices) which will avoid a flanky motion experience.

Exercise

In the exercise page, there are multiple accessibility problems related to color and proportions:

🎯 Goal: Make the page follow appearance guidelines that respect level AA.

Hint 1: Use a browser extension to help you detect color contrast issues.

Hint 2: Use the DevTools color picker to find a color that respects level AA.

Hint 3: Customize your browser font size to see how the content is displayed as you update the code from absolute to relative units. Go to Settings > Appearance > Font Size. (Chrome and Firefox)

Hint 4: In Chrome, you can emulate a motion settings. In Dev Tools, go to Settings > Rendering. Scroll down until "Emulate CSS media" section and select the preferred motion setting. Change in other browsers

Bonus - Achieving Level AAA

1. Color Theming

When creating multiple themes, we can use the CSS media query prefers-color-scheme to set the default theme based on the user color preferences.

🎯 Goal: Add a dark theme to the page. Here are the colors:

--theme-text_0: hsl(0deg 0% 89%);
--theme-text_1: hsl(0deg 0% 68%);
--theme-bg_0: hsl(280deg 3% 23%);
--theme-bg_1: hsl(288deg 6% 17%);
--theme-primary: hsl(180deg 100% 45%);
--theme-primary_smooth: hsl(180deg 100% 19%);
--theme-secondary: hsl(26deg 100% 68%);
--theme-success: greenyellow;

Hint: In Chrome, you can emulate a color scheme. In Dev Tools, go to Settings > Rendering. Scroll down until "Emulate CSS media" and select the preferred color scheme.

2. Visual presentation

There are a few small tweaks we can still do, following the WCCAG recommendations for blocks of text, such as:

🎯 Goal: Update the page to follow the criterion above.

Further reading

Browser extensions

Articles

WCAG Success Criterion

Exercise takeaways

(After the exercise) Reveal takeaways