Web Accessibility: Color and Pattern

The usage of color and patterns in web design is often referred to as the “fun” part of design. Picking colors is great, right? Of course it is, but unfortunately what a lot of people don’t seem to realize is that there is a lot more to your design than just what colors and patterns to use. They need to be carefully considered, in order to make your design accessible to all users of the web.

WCAG 2.0, or the Web Content Accessibility Guidelines 2.0 has very specific requirements for usage of color and patterns on a web page. There is a criterion (1.4.1) which focuses on the usage of color. “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” The most recommended technique to use when designing your website, is making sure that information conveyed by color differences is also available in a text form. If someone using your site is colorblind or has other visual imparements, it becomes difficult to obtain infomation if only shown with the differences of color.

For example, take a subway map displayed online. The different routes are marked by color. You have the red route, green route, etc. The stops on each route need to be designated in a different way, using text or symbols/icons such as diamonds, squares, or circles.

The web is a big place, filled with lots of different people. It should be able to be accessed by everyone. When designing your sites or infographics, keep this information in mind.

References: 

How to Meet WCAG 2.0

G111: Using Color and Pattern

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s