Checking color contrast for web accessibility

Posted by on May 25, 2017 in Accessible Web | No Comments

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

Posted by on May 16, 2017 in Accessible Web | One Comment

logo for GAAD

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:

  1. Take the #NoMouse Challenge — try using a website without using a mouse. Many disabilities make using a mouse impossible to navigate through a website.
  2. 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.
  3. Use the WAVE — Web Accessibility Evaluation Tool to test your site for web accessibility.

Visit the GAAD site to learn more.

Haring Center’s Professional Development Unit’s Shopify site

Posted by on Mar 6, 2017 in Recent work, Websites | No Comments

Haring Center PDU Shopify site

My latest website project has been to develop a Shopify website for Haring Center’s Professional Development Unit (PDU).

Haring Center’s PDU offers professional development opportunities including workshops, live and recorded webinars. As part of the University of Washington, we use Bridge, a Learning Management System (LMS) by Instructure, to present our courses. This new Shopify site allows our customers to be able to purchase our courses and link to the course materials on Bridge.

Detail of Haring Center PDU Shopify site home page

My task was to create the Shopify site, style it with Haring Center’s brand and modify the theme to market our courses. While I’ve worked with many CMS platforms to create websites, this project presented some new challenges — for me and for the University of Washington’s IT department.

The university is piloting Bridge but this is the first time they’ve tried to enable users to purchase courses through a Shopify ecommerce website. On the Bridge side, the UW’s IT group worked with Instructure to create a portal for the PDU’s courses to link to our Shopify site.

Because Bridge and Shopify are separate systems, only a limited amount of information gets passed between the 2 different systems. This meant that we did a lot of user testing to ensure that the sites worked together and effectively marketed our courses — often creating work-arounds for features that weren’t supported by both platforms. In the end, we’ve created a system that is user friendly and our audience is able to purchase the courses that they want to take through our new Shopify site.

Visit Haring Center PDU’s Shopify site.