Things to consider when creating Accessible Text
A few quick things to think about when creating accessible text for the web.
Colour contrast is one of the most commonly referred to aspects of ensuring your website meets accessibility criteria, and it’s one that people can easily address due to the many great tools available to check the WCAG 2.0 criteria for colour contrast ratios. The A11y Project has a great list of tools and resources my favourites are the Contrast App for Mac and Lea Verou’s Contrast Ratio.
However, one of the mistakes I see people make all the time is mis-interpreting the tools, particulary around those ratio’s that aren’t a clear Pass or Fail.
Take the following example using white and green (#60a534). It’s not a direct pass or fail but it does result in a pass at AA for large text.
This is one of the areas I have seen people get caught out on, in particular the reference to 14pt bold or 18pt. I’ve seen a lot of circumstances where people have interpreted 14pt as 14px and 18pt as 18px. Unfortunately these two units are not equal. Don’t worry though, the spec for colour contrast is actually really specific about it:
“… Point sizes are based on the CSS pt size as defined in CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px”
I always forget these values and usually I just google “point to pixel conversion” and a handy table does the conversion for me. What is important to remember here though is that the size difference between what people think is correct, say 14px, is completely different to what the actual font size has to be at 19px. This can have a serious impact on your design, so it’s important to understand these discrepancies early.
It’s not enough that you get a green “Pass” — the size and weight of the text plays an important part and this can vary greatly between different fonts.
If you are using a font that is very thin even if the colour technically passes it still may not be accessible. For example, if we take a look at the image below, it shows the Google Font Montserrat, in a grey which technically passes AA WCAG standards “at any size”. This image is a screenshot of the text at 18px font size. You can see as the font weight decreases into the lighter weights the text becomes more difficult to read. Part of the problem here is that the text becomes so thin, that we start to lose detail in parts of the font and pixels become anti-aliased averaging out our grey with the white in the background.
On my high definition retina screen this might be okay, and might still be readable, but when you render text like this on older monitors, parts of the text can disappear making it incredibly difficult to read.
So what can you do?
- Make sure you have sufficient contrast on your foreground and background
- Check the font weight and make sure it’s not too thin
- When you need smaller font sizes, consider increasing the font weight
- When using thin font weights, try increasing the font size
When all else fails, consult a Typographer, typography is a very complex craft!
My final tip would be, just look at the text, if it takes you a second to focus, or if you think “that’s a little hard to read” then that is a good indication that you need to tweak things. Even just experiment a little making the text a bit bigger, or a bit heavier, you might find that some minor changes make a huge difference to your project.
Make the web easy to read!
Mandy
