Text and images of text should have a color contrast ratio of 4.5:1 against the background.
Exceptions:
- Large text (18 point or 14 point bold) need only be 3:1
- Logos or brand names don’t have a requirement
What to do:
- Make sure all text on your website text to background meets a 4.5:1 color contrast ratio
Resources:
- WebAIM color contrast checker
- Colorzilla color selector Chrome and Firefox extension
- Gimp photo editing software
- How to use WebAIM color contrast checker (YouTube – 1 min 12 secs)
Plain English Explanation:
This is one of the easier success criteria to check for and fix.
All we’re doing is trying to make sure our text sufficiently stands out from the background. The closer text color is to background color, the harder the text is to read.
Here’s an example:
It’s much, much easier to read the white text on a black background vs. the dark gray text which shows why color contrast ratio is so important.
To figure out what colors your website is using, use a color selector tool to grab a color off your website. You will be able to get its hexadecimal code (e.g. #efefef). You can then enter this into the WebAIM checker and instantly know what your color contrast ratio is.
One way to do this is to use the Colorzilla browser extension and use its color selector.
Another way is to take a screenshot of a webpage and then paste it into a photo editing software like Gimp (free) and then use the color selector from there to find out the hexadecimal code.
If this all sounds confusing, the video in the resources section will help you out.
I highly recommend you meet a 4.5:1 ratio with all text regardless of what size it is.
