Contrast Considerations for Accessibility
While diving a little deeper to fill in my personal knowledge on accessibility, I decided to delve contrast and why the current recommendations for accessibility are set where they are, which users are most affected by these choices, and some of the tools available to evaluate design choices.
To make a website functional for all users, it is important to consider that not everyone sees things the way you do.
Contrast can be evaluated by comparing the relative luminance of the foreground and background. This is crucial when considering text on top of a background, and is one of the primary considerations for low vision users.
Because of a loss of contrast sensitivity, the typical visual acuity of people around the age of 80 is approximately 20/40.
The WebAIM guidelines for a minimum contrast ratio for all text is 4.5:1, and provides enough contrast that users in the 20/40 visual acuity category should be able to read the text. Keep in mind, however, that this may still not be enough contrast for all users.
Below is the same contrast image again, but with the contrast ratios shown to get a feel for the appearance of different ratios, as well as a smaller version with a font size of 14.
Under the WebAIM guidelines, the first and second columns have a contrast ratio that is unacceptably low for accessibility, even with text that is more than one and a half times as large as default paragraph text, which increases the acceptable ratio to 3:1.
Contrast with colored backgrounds and text works the same way, and can be similarly evaluated. I find colors more challenging to estimate by eye. Luckily, there are plenty of tools to help!
Lighthouse in Google Chrome can generate a report that will highlight any elements where the contrast is not meeting minimum standards. However, you can also get a more detailed readout by installing the Accessibility Insights Extension for your browser, which will give recommendations for fixing elements that don’t pass the tests.
There are many tools that can help you proactively check colors as you are designing, including this simple contrast checker site where you can enter in the colors you are considering using.
Thank you!
I’m continuing to learn and improve. If you have feedback or suggestions, please let me know, and I will be happy to make fixes.
