Skip to content

Accessibility Project

Percievable

Information and user interface components must be presentable to users in ways they can perceive.

This principle is all about users being able to see or otherwise be made aware of the contents of a site.

Alternative Text

Here's a simple example that most developers are aware of:

Non-text Content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose [...].

There are several different exceptions to this WCAG criterion, check out the links for more information about them, but for this example we will look at the most common example of non-text content — images. You always need to provide an alternative text description for those who can't see a non-decorative image.

Example: Adding Alt Text

I wan't to add an image to my React site:

import keyboardImage from "../../public/pexels-josh-sorenson-1714205.webp"
<img src={keyboardImage} alt="A computer keyboard and a mouse on a dark desk.">

This gives me an image with an alternative text which is shown if you use a screen reader for example.

A computer keyboard and a mouse on a dark desk.
Photo by Josh Sorenson

If you think it's hard to come up with an alt text, imagine describing the image over the phone to someone.

Remember, the texts should be succint and to the point. A general rule of thumb is to keep them under 100 characters.

If you're a developer, you most likely already knew about this. Let's have a look at our main topic which many web developers — and web designers — usually are more oblivous to: color and contrast.

Color Alone is Not Enough

Color is often used to convey information but keep in mind that user's might not be able to differentiate between colors in a meaningful way.

Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Example: Comparison Chart

I've made a component that takes two values and returns a chart consisting of two elements that get their background colors by different CSS classes. The higher value get's a green color and the lower value get's a red color.

export const ComparisonChart: = ({ firstValue, secondValue }) => {
const firstChartStyle =
firstValue > secondValue
? "green"
: firstValue === secondValue
? "yellow"
: "red"
const secondChartStyle =
firstValue < secondValue
? "green"
: firstValue === secondValue
? "yellow"
: "red"
return (
<div>
<div>
<div className={firstChartStyle}></div>
<div>1</div>
</div>
<div>
<div className={secondChartStyle}></div>
<div>2</div>
</div>
</div>
)
}

With some additional styling, an input of values 100 and 200 looks something like this:

1
2

However, if I look at the WCAG criterion above, you can't rely solely on color to convey information. I need to add more visible elements to the chart.

export const ComparisonChart: = ({ firstValue, secondValue }) => {
const firstChartStyle =
firstValue > secondValue
? "green"
: firstValue === secondValue
? "yellow"
: "red"
const secondChartStyle =
firstValue < secondValue
? "green"
: firstValue === secondValue
? "yellow"
: "red"
return (
<div>
<div>
<div className={firstChartStyle}
style={{ height: `${ (firstValue + secondValue) / (secondValue * 0.02) }px`}}
>
{firstValue}
</div>
<div>1</div>
</div>
<div>
<div className={secondChartStyle}>
style={{ height: `${ (firstValue + secondValue) / (firstValue * 0.02) }px`}}
>
{secondValue}
<div>2</div>
</div>
</div>
)
}

By showing more information in my chart I can make it much more accessible. Since I already have access to the values of each staple, I can put them inside the colored elements. I also made an inline style that calculates the ratio between the two, based on the range of the values I'm expecting.

Now a user is no longer relying on just the color to find out the higher and lower value. Here demonstrated by inputting the values of 200 and 150:

200
1
150
2

Contrasting Text Color

Contrasting colors is one of the most common accessibility blunders online. I suspect it's because it's easy to overlook and hard to get exact, as described by this WCAG criterion:

Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text. Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
  • Incidental. Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes. Text that is part of a logo or brand name has no contrast requirement.

Apart from a few exceptions, text visible on screen needs to have a certain amount of contrast to the background color. There are different levels of success: AA and AAA.

AA is the minimum requirement and has the threshold value of 4.5:1 that is mentioned in the criterion. This is roughly what is needed to compensate for the loss of vision of an 80-year-old.

To meet the higher requirement of AAA, a minimum contrast of 7:1 is needed. This is based on the loss of contrast sensitivity among users with low vision but that do not use assistive technology.

As a comparison, black text on a white background has a contrast of 21:1. Read more about the levels on the page about WCAG Critera.

Example: Dark Mode

I'm using dark mode on my site. In light mode the text is black and the background is white, in dark mode they are switched.

However, on some parts of the site I have a box with another color:

.box {
background-color: rgb(71, 85, 105);
border: 2px solid black;
padding: 1rem;
}
<div className="box">
Lorem ipsum dolor sit amet, consectetur adipis.
</div >
Lorem ipsum dolor sit amet, consectetur adipis.

All good, I'm happy with my site when viewing in dark mode and get an AAA rating for my text when checking. But I've forgotten about light mode, and that all the text on the site change to a black color while using it.

A dark gray box with black example text, it's hard to read.

The solution is simple, just add white text styling to the box class to be sure the text will remain white regardless of mode. Sometimes the hard part is to identify the issue at all.

.box {
background-color: rgb(71, 85, 105);
border: 2px solid black;
color: white;
padding: 1rem;
}

A couple of notes:

Some web browsers, such as Google Chrome or Mozilla Firefox, provide an Accessibility tab within their Web Inspector tools. This tab allows you to check color contrast easily. There are also plenty of other resources available online, like this tool from Coolors.

Contrasting colors are not limited to text, here's a criterion for graphic elements and images:

Non-text Contrast

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • Large Text. Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
  • Incidental. Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.