SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Colorblindness & Graphic Design: Will We Ever See Those Two As a Matching Couple?

November 24, 2015 by Veronika

Color Blindness

Colorblind users. It’s something that not every designer has considered when creating images and web experiences. About 5% of women and 8% of men are colorblind. This term tends to make it sound like all “colorblind” people see the world in exactly the same way, but as with most things in life, one size doesn’t fit all with colorblindness.

Colorblindness: Understanding the Cause

Recognizing the problem in its core is the first step towards making an impovement in your design’s colour structure.

Most people are able to perceive color in a normal range. Human sense of color is derived from the presence of “Cones” in the eye. Cones are sensitive to color, while the more numerous Rods are sensitive to light, allowing humans to see when there isn’t much light present. Rods outnumber Cones many times over. And while cones are in the minority, their function is no less important. If someone is deficient in cones of a specific color, or their cones aren’t working right, they will not be able to distinguish between colors the way someone with “normal” vision would be able to.

What does this mean for graphic designers?

When creating a design, which needs to surve a bigger audience, you need to pay attention to this small, yet valuable part of the users, who will inevitably struggle to use your website the way it’s intended to.
Combining saturated colors

 

Remember the McDonalds logo? I mean, who doesn’t, right?

Actually, Earth’s largest restaurant conglomerade has a slight blemish in its logo, which sometimes makes it hardly visible for people with a certain type of colour blindness. Don’t get us wrong, we totally love those crispy fried, but the issue here is different. When the contrast is not high enough, what users will see is a barely visible “m” and they’ll pay more attention to the white, contrasting text rather than the company’s symbol.

But this is just a case of the extremes. Most people will clearly distinguish the difference in the colors’ brightness of the yellow and red elements, and this is exactly what designers need to have in mind when creating their projects.

The World in #FFFFF and #00000

Sometimes, colorblindness can be so extreme that a very small percentage of the affected wound’t be able to perceive color at all, instead viewing the world in black and white. This is the exception, not the rule. Most colorblind people just don’t have the visual “repertoire” that most people do. So what does this have to do with you and your designs?

Monochromacy

Making a user-friendly desing in terms of colorbliness is a rather easy task when you have the right tools for the job. Being well-informed and prepared for job will make creating designs for colorblind users feel like a breeze. All you need to do is follow those rules.

 

Work With Shades, Not With Color.

We’ve all played games like Zuma and its modern mobile equivalent, Bejeweled.  There are many other games like those out there, but that’s not what’s important. All these games have a certain visual feature in common which could make enjoying an joyful afternoon of visually matching a set of pretty gems a rather dull activity for colorblind people. You guessed it – it’s color!

 Colors

 

When not having a clear contrast between the different colors, making a difference would be a quite tiresome task. The same rule, which applies to video game and interaction design, goes for graphic design, as well.

Colorblind people have a hard time differentiating different tones of the same color from one another. For example, if you have a box that goes from a one tone of the colour to another without creating a clearly distinctive contrast it wouldn’t be quite visible. When scroling over it, the colorblind user may not be able to perceive the difference.

Article on Color Blindness

If your site has many responsive actions which rely mainly on color, this can limit the functionality for 8% of your male usership, rendering some sites totally incomprehensible.

Yet, this barely scratches the surface of creating a user-friendly web design which is particularly created to serve people with colorblindness. Without creating a clear distincion between colors even people with “normal” vision woudn’t be able to see your designs clearly.

Here is an example.

Color Blindness
Color Blindness

Both pictures clearly represent a mind-boggling combination of colors which make your mind endlessly jump from one shade to another, trying to distinguish and memorize a clear image. Unfortunately, the best that these color palettes can do is make your eyes hurt!

This is exactly what happens to colorblind people when they try to focus on an image which is not well-optimized for all vision types. Horrible, isn’t it?

But what’s most troubling is that regardless of not  being entirely compiled by such colors, your design might still give your users a headache when the optimal color contrast is not well-measured.

Contrast is Everything.

Using the right contrast in your design, be it a black & white or color-rich, you’ll be able to create an interactive design which is easy on the eyes and still helps your users surf through intuitively.

Color Blindness

Other colorblind individuals have problems telling apart different colors that are about the same brightness. For example, if you have a dark forest green beside a dark navy blue ( not that any of you would have such a weird color combination ), those colors might appear to be identical to the colorblind user. There are other issues that afflict people of this type, but these are the two most common.

So what are you able to do to alleviate these difficulties and make your work usable by the highest percentage of the populace?

Being conscious of color and brightness, especially to keep two similar color / brightnesses from being directly beside one another, is a start. But you can also put useful contrasts through problem colors.

Buttons example

For instance, a simple textured line pattern that appears on a box when someone scrolls over it will demonstrate to all users that some functionality has been initiated, you colorblind users included.

The Conclusion.

The design has to account for different faculties of users in this way, in a way that something developed in Schema.org would not. This doesn’t mean that design shouldn’t account for these difficulties.

Colorblindness is a common problem, and you’ll make the world a better place by creating experiences that are useful to people with this visual difficulty.

Filed Under: Inspirational Tagged With: color blindness, colorblind, colorblind users, desing tips

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022