How to do an accessibility review for your website: Font
Tags: a11y, fonts, programming, webdev
Published: 2022-03-09 12:13:25

---
title: How to do an accessibility review for your website: Font
published: true
date: 2022-03-09 12:05:36 UTC
tags: accessibility,fonts,programming,webdevelopment
canonical_url: https://relatablecode.com/how-to-do-an-accessibility-review-for-your-website-font/
cover_image: https://cdn-images-1.medium.com/max/1024/0*USiPJ8_4x3PWRWKK.jpg
series: Accessibility Review
---

In my previous post about reviewing accessibility, I covered a lot of the HTML-structure-based implementations you can do to make it more accessible, especially for screen readers!

[Part 1](https://relatablecode.com/how-to-do-a-thorough-accessibility-review-for-your-website/)

However, there are a ton of options to making a webpage more accessible from a visual point of view. In the second part of this series, I’ll cover font.

### Accessibility: Relative length units

**EM** and **REM** are CSS units that describe the size of spacing or font. The important aspect of EM and REM is that they scale according to different font sizes. EM scales according to the font size of the parent element while REM scales according to the font size of the root element.

Why is this scaling so important? Well, a user can adjust the font size in their browser:

![Navigator setting for font size](https://cdn-images-1.medium.com/max/674/0*F3NXw8Eb9UxNs8CH)

Or they could have extensions/plugins that can load custom style sheets with custom font sizes. It’s important to take these possibilities into consideration. All padding, margin, spacing, and font sizes should be changed to use these types of units!

Here’s a visual example breaking it down:

![HTML Structure with different font sizes](https://cdn-images-1.medium.com/max/840/0*NlzEEYvItcq1OtDW)

The output:

![Text with different font sizes](https://cdn-images-1.medium.com/max/180/0*-jGQ0OXxs-4IKQmY)

The EM and REM units have the same size as the EM unit takes the size from the parent div and the REM unit takes it from the root element (aka the **HTML**  Tag).

Font size in general should not go below **0.875rem** which in most cases is the equivalent of 14px. Anything smaller and users will most likely have to zoom in to read the text comfortably.

### Accessibility: Colors and Contrast

One of the more important factors of choosing a color for the text is the corresponding contrast between the foreground and the background. This is a **very** important factor in choosing the color scheme.

This can affect the readability of text in not only visually impaired readers but even past that it helps all users have an easier time digesting the text.

Thankfully there are some tools that can help us overcome this contrast problem. WebAIM has a popular one of their website:

[https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)

This comes built into the dev tools. Let’s take this text as an example:

![Hard to read text](https://cdn-images-1.medium.com/max/168/0*OnSP9Ns2CKnmiRH_)

If we **right-click** the text on a webpage, go to the Elements tab and click on the color of the tab we’ll see some contrast ratio options near the bottom of the newly opened popup:

![Devtools Contrast ratio](https://cdn-images-1.medium.com/max/564/0*EEzLt8Kb7a9i2TzI)

Expanding the contrast ratio will give us two options to help out with some new colors!

![DevTools contrast ratio picker for accessibility](https://cdn-images-1.medium.com/max/223/0*bhe_l-iXl-ahlc08)

Clicking on the little icons next to the square will suggest a better color to go with the background.

To give a small explanation of the meanings of the numbers:

> _WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text._

> [_https://webaim.org/resources/contrastchecker/_](https://webaim.org/resources/contrastchecker/)

Comparing the new colors side-by-side we get the following:

![New and improved accessible font color](https://cdn-images-1.medium.com/max/176/0*H2_PIBb6EE0QsPkR)
_New and improved accessible font color_

Wow, that’s a lot better!

### Choosing the best font style

This is far more straightforward than the previous two as the font style should be standardized across the website. However, there are some considerations that are important when choosing a font.

The best fonts are simple with little ambiguity about what each character is. The natural space and weight of the fonts are important. As a general rule of thumb, the weight should not be below as it becomes significantly harder to read.

The natural font size should follow similar guidelines to what I mentioned before. nothing below the 0.875em.

One good example of a readable font is (there are others but just to show an example of what it may look like).

Verdana:

![Verdana Font](https://cdn-images-1.medium.com/max/574/0*mFgRauENVyE2huaC)

That about wraps up fonts for now! In the next part of this series I plan to cover images and what to do (and not do) to make them more accessible.

Hopefully, this served as a good introduction to making your site’s font more accessible. Leave any additional tips or feedback in the comments below.

More content at [Relatable Code](https://relatablecode.com)

If you liked this feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/diego-ballesteros-9468a7136/) or [Twitter](https://twitter.com/relatablecoder)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/how-to-do-an-accessibility-review-for-your-website-font/) _on March 9, 2022._