Website accessibility is becoming and bigger and bigger topic on the internet, and for good reason.
Having your website accessible to everyone, regardless of their abilities, is just good business. But, website accessibility can also feel like attempting to slay a 12-headed hydra monster while wielding a penknife.
So, in this article, we are going to tackle one head of the hydra monster, and we’re going to give you a simple formula for doing it. Selecting your accessible fonts.
Accessible Fonts Guidelines for WCAG 2.1 Level AA
We start with the basics of choosing accessible website fonts. This includes making sure that they are legible, easy to read, and have enough contrast.
There are many different ways of achieving these three goals. But there are some guidelines to follow when choosing which fonts to use on a website. To be specific, those guidelines are called WCAG 2.1 level AA. This is the recommended standard for the majority of websites.
Here are the relevant sections of the WCAG 2.1 level AA that we are going to follow:
- Text and images of text have a contrast ratio of at least 4.5:1
- Large text – at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold – has a contrast ratio of at least 3:1
- Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.
While the guidelines do not specify a minimum font size, the generally recommended size for main body text is 16px. And it’s a pretty agreed-upon minimum that nothing should go smaller than 12px.
Choosing legible, easy to read accessible fonts
Now, it’s time to choose some easy-to-read fonts. So, we’ll head over to Google fonts and put in a nice long, hard-to-read string of characters.
Below is a string of characters I use to evaluate fonts. If I can’t easily tell which letter is which, it’s a bad font for readability. I’ve also used some sentences that have every letter in English in them. And the sentences are not easy to read & logical, so you need to put some effort into reading them.
Many people evaluate font choices using content they know well and can read easily. It’s better to use content that you are unfamiliar with that requires you to pay closer attention to how readable the font actually is.
TIl17 mnmnnmn GC0O ij IJ aec uvvw EF T7Z2 O0D gqa B835S. The quick brown fox jumps over the lazy dog. Jinxed wizards pluck ivy from the big quilt. Jaded zombies acted quaintly but kept driving their dizzy oxen forward. We promptly judged antique ivory buckles for the next prize.
String of characters for testing fonts
Here’s one of the first fonts that pop up – and take a look, it’s awful to read. Plenty of clients have asked for “fancy” or “cursive” types of fonts — and all that leads to is the inability to actually read the page. Sure, it may be fine for search engines to read, but honestly, it’s awful for the rest of us.
Once you’ve entered the testing string of characters for accessible fonts, I recommend limiting the categories to just “Serif” and “Sans Serif” and reducing the font sample size to 20px. This will give you a much better idea of it is really readable.
Some of the key things you are looking for is that uppercase ‘i’, lowercase ‘L’, and the number one are clearly different. Next, you want to make sure that two ‘n’s are clearly different from ‘m’. Similar with ‘u’, ‘v’, and ‘w’. Make sure that ‘T’, ‘7’, ‘Z’, and ‘2’ are clearly different. Also, capital ‘o’, number zero, and capital ‘d’ are different.
The final thing you want to check is that letters don’t overlap with each other. In the first example, you’ll notice that ‘i’ followed by ‘j’ merged together into ‘y’ with two dots on top. Several other letters overlapped their neighbors, making them hard to distinguish.
Finally, when you set your font, you should set a fallback. Something built into an operating system. My personal favorite is Verdana, although some people prefer Helvetica or Arial (I don’t because of the uppercase ‘i’ looking like lowercase ‘L’).
Remember that font-weight matters. I recommend choosing weight 300 or 400 for the body text of your website. For headings, I recommend a font-weight of at least 200, up to 700. I don’t recommend going very thin or very thick as the letters become hard to read. Recommendations vary based on fonts, as one font at weight 400 can look like another font at weight 200.
Now that we’ve chosen a font (or two fonts if you want one for headings and one for content), it’s time to pick out colors!
Selecting accessible font colors
Before we get started selecting colors, let’s cover a few simple guidelines for people with vision issues or perception issues (dyslexia, neurological issues, etc).
Some color combos to avoid:
- Pure black with pure white – this is actually too much contrast. Also, a number of people who just have sensitive eyes find this painful.
- Black on blue – Even though you can technically get enough contrast between a saturated blue and black, it’s still hard to read — and I have perfect vision.
- Black on blue-grey
- Black on green
These recommendations are based on a 2017 study of readers both with and without disabilities.
Our minimum goal is to get a contrast ratio of 3 for headings. This is really for all humans to be able to read your text.
For WCAG 2.1 level AA, our goal is also to get 4.5 for regular text (fonts below 24px). Our goal is also to not have more than 16, as when we get too much into white/black it can actually be painful for people with sensitive eyes or very bright monitors.
While there is no maximum color contrast in the WCAG guidelines, reading studies have shown repeatedly that too much contrast actually impairs readability in both regular and disabled readers.
Something important to remember, colors will look different on different monitor settings. I’ve had clients tell me their orange looks correct on their iPhone and it looks like red on their desktop PC. Well, that’s true. Their desktop PC has color settings that have moved the orange to red. Not all monitors are created with the same range of colors, and not all of them are configured the same.
So, accept that you can not control all monitor settings in the world, and move on.
Now, we’ll head over to Deque Color Palette.
Note: There is another color checker I like from Accessible Palette. It uses the color draft guidelines from WCAG 3, but can be a bit challenging to understand.
The tool is pretty intuitive, enter your colors and it will show you the contrast ratio and where in the WCAG level AA it passes. You can select background and text colors, so you’ll see all of the combos. If you increase the text size to 24px, it will show you a passing score of 3 instead of 4.5. A particularly nice feature is that it suggests colors for you when you don’t pass.
Putting together your accessible font choices
Now that you’ve selected your fonts and your colors, it’s time to give them to your web developer to have them implemented on your website. Remember to always give your developer the hex codes for the colors.
Provide this font information
- Heading font choice & weight
- Body font choice & weight
- Fallback font choice
Provide this color information
Remember, it’s common and perfectly ok for your body text and your heading text to be the same color.
- Background color for content of website
- Body text color (contrast ratio of 4.5 up to 16 against background)
- Heading text color (contrast ratio of 3 if using larger text or bold up to 16 against background)
- Link color (contrast ratio of 3 or greater to body text color)
- Button color (commonly same color as links)
- Button text color
And please, for the love of usability, make sure that your link color and your heading color are different. When your headings and your links are the same color, people can’t tell where any links are and can become incredibly frustrated and leave your website because of it.
Also, users have been trained since the beginning of the web that blue text is a hyperlink. So really, don’t use it for non-hyperlinks. If your brand colors make it better to use another color for links, use that. But blue means a link. Especially if you have older users.
I’ve had clients get emails and calls from customers saying their website is broken because links and headings had the same color — customers had no idea where to click and therefore assumed the site was broken.