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.
Global Accessibility Awareness Day: May 18, 2017
Global Accessibility Awareness Day is coming up this week on Thursday, May 18, 2017. The purpose of GAAD is to “get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities”.
GAAD was inspired by a blog post written by Joe Devon, who proposed creating a day where “every web developer will be urged to test at least one page on their site in an accessibility tool. After fixing up the page, they are urged to blog about what they changed and inspire others to follow suit.” Read the inspiring blog post here.
All over the world, technology communities are holding Global Accessibility Awareness Day events, talks and workshops. You can see a partial list of these events on the GAAD Events page.
If you are not able to attend a live or virtual event, here are a few suggestions of ways you can take part by testing on of your own sites:
- Take the #NoMouse Challenge — try using a website without using a mouse. Many disabilities make using a mouse impossible to navigate through a website.
- Check for Sufficient Color Contrast — check your webpage to see if there is suffient color contrast. For this year’s challenge, I’m planning on trying the color contrast analyzer by The Paciello Group or by Web AIM on one of my websites.
- Use the WAVE — Web Accessibility Evaluation Tool to test your site for web accessibility.
Visit the GAAD site to learn more.
5th Annual Global Accessibility Awareness Day
Thursday, May 19th is the fifth anniversary of Global Accessibility Day where designers, developers, usability professionals are encouraged to take an hour to experience first-hand the impact of digital accessibility (or lack there of).
For my part, I decided to test a website that I currently manage using the WAVE Web Accessibility Evaluation Tool. I’ve been working to improve web accessibility on the Haring Center site using what I’ve learned by attending Web Accessibility workshops and talks.
Contact me