Color contrast: text
Tags: a11y, css
Published: 2020-06-17 22:07:57

---
title: Color contrast: text
published: true
description: Low color contrast text is a huge accessibility problem. In this post we see some CSS properties to take into consideration.
tags: a11y,css
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ulq9c7vi0750sq9lcrhx.png
series: Web Accessibility with CSS
---

Low color contrast text is the top accessibility problem according to the [WebAIM Million report](https://webaim.org/projects/million/), an accessibility analysis of the top 1,000,000 home pages on the Internet.

So, **what is color contrast? why is it important for accessibility? and how can we improve it? and what is CSS's role in it?**

To make it simple, [the contrast between two colors can be defined as the **difference between both of them**](https://a11yproject.com/posts/what-is-color-contrast/). The contrast is a calculated number that goes from 1 to 21 (normally represented as a ratio like 1:1 or 21:1).

If the two colors that we are comparing are the same, the contrast will be 1 (1:1); if they are exact opposites (complementary colors), the contrast will be high; and if they are black and white, they'll have the highest contrast possible (21:1).

<figure>
![Lorem ipsum first sentence in different shades of gray](https://dev-to-uploads.s3.amazonaws.com/i/g40i0gm9ox2qcan2xq0g.png)
<figcaption>Higher color contrast ratios are easier to read</figcaption>
</figure>

As displayed in the image above, **high color contrast values are good because they make the text easier to read**, while lower color contrast values are bad because the text is more difficult to read (to the extreme of the last example, which is impossible to read for any sighted user.)

At the moment, CSS by itself is insufficient to calculate and prevent contrast issues. For that, we need a more imperative language or using [one of the many tools available online (including browsers!)](https://dev.to/alvaromontoro/free-web-accessibility-tools-4kfd#color-contrast-checkers). For example:

- [WebAIM color contrast checker](https://webaim.org/resources/contrastchecker/)
- [Accessible Web Colors](https://accessible-colors.com/)
- [Who Can Use](https://whocanuse.com/) ([thanks Thomas Leenders for the suggestion](https://dev.to/thomasleenders/comment/10hlo))

<figure>
![Screenshot of Firefox integrated color contrast tools](https://dev-to-uploads.s3.amazonaws.com/i/cqshgdmtby8tokavle57.png)
<figcaption>Firefox dev tools include a convenient color contrast checker</figcaption>
</figure>

> Actually, [creating a color contrast checker is a relatively small and easy project to develop](https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o), and it can be helpful to practice new technologies as well as learning about accessibility. A win-win.

Color contrast requirements do not only depend on the colors but also on the size of the text. That makes sense as smaller text is more difficult to read and needs more contrast than larger text.

<figure>
<table>
  <thead>
    <tr>
      <th>Component</th>
      <th>AA-level</th>
      <th>AAA-level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Small text<br/><small>(<18pt or >=14pt bold)</small></th>
      <td>4.5:1</td>
      <td>7:1</td>
    </tr>
    <tr>
      <th>Large text<br/><small>(>=18pt)</small></th>
      <td>3:1</td>
      <td>4.5:1</td>
    </tr>
  </tbody>
</table>
<figcaption>Table with color contrast requirements depending on font size and accessibility level</figcaption>
</figure>

Once we have verified that the colors have enough color contrast, we can go back to CSS. As the technology in charge of display and presentation, it is CSS's job to set the background and foreground colors and where the contrast solution will live.

When you work with CSS, remember there are some properties that will affect the contrast of the text:

- `color`: the color of the text in itself
- `background-color` and `background-image`: notice that the background may be set at an ancestor and not directly at the element.
- `font-size`: the size of the text.

<figure>
```css
/* This is accessible */
p {
  color: red;
  background: white;
  font-size: 20px;
}

/* This is not */
p {
  color: red;
  background: white;
  font-size: 12px;
}
```
<figcaption>Font size is key when validating color contrast</figcaption>
</figure>

## What if there's more than one background color?

There are some cases in which you may not know the background color or it may be _inconsistent_ (e.g. using gradients or images as the background).

In those cases, there is not always a clear-cut solution because the same color that may work in a part of the text, may not be sufficient in other parts of the text. 

<figure>
![Picture of a cat with the caption: this textdoes not always have enough contrast because the color in the background changes.](https://dev-to-uploads.s3.amazonaws.com/i/ovfphs04dmxfqprh18t9.jpg)
<figcaption>The image does not provide enough contrast for the text in some areas.<br/>(Cat tax picture from <a href="https://unsplash.com/photos/gKXKBY-C-Dk">Unsplash</a>)</figcaption>
</figure>

We can add an outline to the text, which will create a border and make the text color "independent" of the background. We just need to ensure that the border color and the text color have enough contrast.

To achieve this we have different options:

- [Using `-webkit-text-stroke-color`](https://css-tricks.com/adding-stroke-to-web-text/): this is a simple to develop way but is not a standard property, and it may not look good with smaller fonts.
- [Using text shadows](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow): which may get more readable results, but it is more difficult to code (especially for thick outlines) and it looks _funky_ with serif fonts.

```css
.text-with-outline-1 {
  color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #000;
}

.text-with-outline-2 {
  color: #fff;
  text-shadow:  0px -1px #000,
                1px -1px #000,
                1px  0px #000, 
                1px  1px #000,
                0px  1px #000,
               -1px  1px #000,
               -1px  0px #000,
               -1px -1px #000;
}
```

<figure>
![Picture of a cat ](https://dev-to-uploads.s3.amazonaws.com/i/93mtarzbi1bht6r844pa.jpg)
<figcaption>Many meme sites use this technique to improve readability</figcaption>
</figure>


----

**Make sure that the color of the text has enough contrast over the background, so it is visible and readable.**