Checking color contrast for web accessibility
Last Thursday was Global Accessibility Awareness Day (GAAD) — a day where everyone who creates digital content is encouraged to learn more about web accessibility. As part of this year’s GAAD celebration, I decided to test a website’s color contrast to see if the colors used had sufficient color contrast to meet web accessibility standards.
Color contrast plays a big role in how legible text is on websites. Bright, bold colors might seem like a great way to highlight headers and make links stand out on a webpage. But, unless there is enough contrast between the color of the text and it’s background, the use of color might be making the “highlighted” content less legible for people with certain vision impairments.
For this test, I’ll be looking at the color contrast used on my own site. Currently the green color that I use on my website’s headers and links is a bright green color that is mostly used against a white background. However, I suspected that my color choice did not meet the color contrast standards set by the Section 508 web standards for web accessibility.
WebAIM Color Contrast Checker is a great, free online tool that is used to test the color contrast on your site. This tool allows you to enter the hex colors for your foreground (ie. your highlighted text color) and the background color. WebAIM will calculate the contrast ratio between the two colors to see if the color combination meets web accessibility standards.
Web Content Accessibility Guidelines (WCAG) 2.0 requires a specific contrast ratio for colors to be considered “web accessible”. For example, “WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text (14 point and bold or larger) and 3:1 for large text (18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.” (from the WebAIM website).
A test for color contrast using WebAIM, shows that my chosen color HEX #79aa51 fails on both normal sized text used for my body content and links and for the larger sized text used for my headers. When used against a white background, my chosen green only has a contrast ratio of 2.73:1.
With the WebAIM Color Contrast Checker tool, you are able to modify your color choices by lightening or darkening the foreground or background colors to find combinations that meet web accessibility standards. After shifting my green to a darker, less yellowish green (HEX #46842a), my site now meets the color contrast standards for web accessibility.
This new darker color changes the look of my site but it’s an improvement. While I preferred the older green aesthetically, I needed to change my color to make my content more accessible and legible for everyone.
For more information about using this tool, visit: WebAIM
Tags:Accessible Web, Usability, UX Design, Visual Design, Web Design
Contact me