There’s no doubt that you understand the need for your website to be accessible for as many users as possible. But reading through all of the guidelines and standards can be a little overwhelming. You can find the latest W3C recommendations here, but do you need to know every word, and follow every guideline?
Today, we’re going to try to make it all a little bit easier with some tools and resources to help you improve website accessibility (and maybe even some checks to consider that weren’t on your radar!).
Whether you’re looking to ensure you have enough visual contrast, a site that’s accessible to screen readers, or even create accessible emails, we’ve got you covered!
1. Color Safe
Color Safe helps you check (and even create) accessible color palettes based on WCAG Guidelines for text and background color contrast. The tool and standards use a ratio-based formula to determine color combinations that can be read by all.
WCAG Guidelines recommend a contrast ratio of 4.5 for small (body) text and 3 for large text (anything over 24 points).
Just enter your colors – based on HEX code – font choice and size and generate a palette. You get an immediate ratio to check against and can see other similar colors. Check through to see if something similar might be a better option based on your typeface and size.
NoCoffee is a Google Chrome browser extension that helps you visualize your design in the same way someone who is vision-impaired might see it. (Nothing highlights the importance of accessibility like seeing it in this manner.)
It can check for and show the following:
- Low acuity with small text or click targets
- Low contrast problems with text and background elements
- Visual snow, glare, ghosting and cataracts
- Nystagmus, which is rapid involuntary movement of the eyes
- Obstructed visual fields
3. Contrast Checker
Contrast Checker allows you to enter background and foreground colors on the screen and get immediate checks against several visual standards with an instant, color-coded pass/fail.
Nice features of the tool include the ability to flip between color and grayscale options, share samples of your checks and pull colors from images. You can also save a PDF sample. It’s an easy tool with plenty of features that anyone can use quickly.
It also provides the color ratio, as outlined in the WCAG Guidelines.
- Headings and heading order violations
- Contrast (or lack thereof)
- Link text that’s