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.

(more…)

Emotional Design: Why we love (or hate) everyday things

Posted by on Jul 25, 2016 in Reading List | No Comments

Emotional Design

The most recent book I’ve read was Donald A. Norman’s Emotional Design: Why we love (or hate) everyday things. Norman provides “evidence that aesthetically pleasing objects enable you to work better”.

When designing products, utility, usability, function and form are important considerations. In addition, all products contain visceral, behavioral, and reflective design components. These influence the emotions we “feel” towards products — whether we end up “loving” or “hating” them.

Visceral design is the aesthetics or “how something looks”. Often this is what first attracts someone to a product. Reactions can range from “wow”, “cool”, “beautiful” or even a negative “ugly”.

(more…)

Road Map Race to the Top — Case Study: Visual Designs

Posted by on Sep 13, 2013 in Case Studies | No Comments

In creating the visual design for this site, we wanted to highlight the three areas that this educational grant will be emphasizing: Start Strong (pre-K through 3rd grade), STEM Strong (Science, Technology, Engineering and Math skills) and Stay Strong (connection from high school to post secondary opportunities and career). Photographic images of students as well as illustrations were included in each design.

Four visual design concepts were considered for this site, with the last one shown here selected for use.

In creating the visual design for this site, we wanted to highlight the three areas that this educational grant will be emphasizing: Start Strong (pre-K through 3rd grade), STEM Strong (Science, Technology, Engineering and Math skills) and Stay Strong (connection from high school to post secondary opportunities and career). Photographic images of students as well as illustrations were included in each design.

Four visual design concepts were considered for this site, with the last one shown here selected for use.
(more…)