B2B Design Blog

Categories


Archive

Tags

Working HabitsColor Wheelcreative design servicesLogo DesignSocial Media#hashtagHealthDesignSmall Businessholiday giftsPoster Designgraphic designer oaklandSan Leandro Graphic Designercreative businessTeam Buildingfood additivesCalgary Marketing Social Media Marketingcustomer serviceOakland graphic designerFacebookgraphic design tipsAccounting ProfessionalTradeshowColor BlindnessWeb Design Tipsco-brandingOakland Business Descriptionsorange creativeDigital NomadDesign IndustryCAN-SPAMgraphic design companies calgaryGoogle Rankinggraphic designLink backsbusiness networking oaklandcreative design companyseo tipsemailseoCalgary Start-UpsGraphic Design ToolsTech Start-up InvestingServant LeadershipPhotoshop ToolsCamera TipsinfographicsWhy is branding important?young creativeProduct Brand Developmentsmall business marketingBerkeley business cardsgraphic design services calgaryColor TheorySales Sheet DesignInternational BusinessFreelance Graphic Designbusiness networkingSan Francisco Graphic Designersorange creative designEmail marketingSocial Media TipsEntrepreneurialismapp designConcrete5Search Termsyoung workerslogo design color theoryOakland Photographyoakland website designCalgary Graphic DesignersPoint-of-Sale POS Design2013Mailchimp Email Marketingco-marketingBlogging for Oakland Businessesbuilding businessSan Francisco JobsAccountingvideoCorporate IdentityTech Start-up InvestorPhoto TipsCalgary Social Media MarketingOakland Search TermsBerkeley BusinessOakland web designerscorporate cultureSan Francisco Public SpeakingB2B MarketingBusiness Brandingcolors for graphic designerspublicationsBusiness Cardsoakland small businessorange designnetworkingHashtagCalgary JobsColour Theoryweb designNetworking BusinessHayward Graphic artistBusiness Practicessmall business marketing adviceOakland BusinessProductivityOakland seo tipsgraphic design in san franciscoColour WheelClientsNatural HealthTwitterTraveling Abroadwebsite design company calgarypublic relationsArchitectbranding and identityweb traffic linkingcalgary website design companiesSan Francisco BusinessTBTorange companiesTechnologyCopywritingorange design pngTraveling BusinessMarketing StrategyArt historyCalgary BusinessAdobe Photoshop CS6Christmascolors for artistsSan Francisco Tech Start-upStart UpsServant Business OalandLocal San Francisco Businesscreative ideascolors for paintingphotoshopUX/UI InterfaceLeadership SkillsBusinessbloggingConcrete5 WebsitesSan francisco artistSan francisco design agencyMarketingMale demographicOnline Storeorange in marketinggraphic designer business cardSmall Business FinancialsPhotoshop Tipsphotographymillenialsbusiness identityOakland SpeechesBrandingorange creativesWebsite DevelopmentSan Francisco Website DesignOakland CareersWordpress Website DesignInnovationMarketing Designinfographic designerBerkeley design agencyYYC Start UPsColorSan Francisco Start-upsmall business web design san franciscoeCommerceOakland logo designerGraphic Designing Canadiansdairy queenbraingstormingcreative graphic designcalgary graphic design firmonline marketingcolors by genderResume TipsBusiness MarketingStrategyonline consumersbusiness networking san franciscowebsite contentpress releaseOakland graphic designHTML CSScodingBusiness networking in OaklandSan Francisco Leadershipweb design orangeBusiness Card Design & PrintingProduct DisplayLogo DesignsGender marketingGraphic designer recruiterweb design services calgaryAd DesignOakland Public Speakingbranding and indentityOakland Jobswork life balanceMailchimpWebsite Proposalsonline promotionSan Francisco Workplacevisual data designDeveloper ToolsRequest for Proposal (RFP)San Francisco Graphic DesignerBerkeley graphic designerSearch Engine Optimization (SEO) female demographicOakland SEOCustomer ExperiencePHPoakland, caBalanced Lifestylegraphic designers in OaklandGraphic design strategy


Why Website Design Needs to Go Beyond Color

May 12, 2014

 
Colourblind-test

A test for protanopia (red-green color blindness). The circles and character are randomly generated.

In general - but particularly in the design world - color is a powerful tool.

It conveys moods and emotions, adds presence to designs, and builds brand identities. All too often, however, users who suffer from any color deficiencies struggle to navigate their way through our color-drenched world. For their sake, I often advise designers to have accessibility in mind and test web pages in grey scale format to ensure usability remains in tact when colors aren't viewed in the intended way.

Users who suffer from any color deficiencies will have difficulties to distinguish the differences between certain colors. The most common type of color deficiency is red-green color-blindness, where red and green are seen as the same color.

Below is an illustration of the most common forms of color-blindness taken from Color Matters.

color-blindness-chart

 

IMAGE: COLOR MATTERS

Looking at this chart, one must consider the visibility (or lack of it) of red error messages to users with this type of color-blindness when completing online forms.

Let's take a look at the home page reservation form Avis gives us. I simply clicked "Continue" without filling anything out, and the error message I received to "Please enter a Pick-up Location" was presented in plain red text.

 
Avis Car Rental

 

IMAGE: AVIS

Lets view this through the eyes of a green-blind user using our color-blindness simulator.

 
Budget-green-blind

IMAGE: COLBLINDOR

The high contrast of the red error message has been lost and instead, replaced with green color text that nearly blends in with the black content on the page and is very easy to overlook.

Another example comes from the Budget home page reservation form, where again I simply clicked "Continue as guest" to receive an error message. In this case, the red error message is presented with red copy over the field's label and a red border around the actual field. 

Budget-colorblind

 

IMAGE: BUDGET

Lets view this through the eyes of a green-blind user using our color-blindness simulator.

Budget-green-blind

 

IMAGE: COLBLINDER

Red colors are lost and replaced with light green colors. The green copy does not carry enough contrast to attract any attention and the field's border no longer appears highlighted at all.

Conclusion

Don't rely on color alone to deliver your messages online. Instead, combine color with other design fundamentals such as typography, shapes, grids, and spaces and allocate more weight to important elements.

The Home Depot account registration form is utilizing shapes in addition to color to indicate where problems arise. An exclamation point presented in a square shaped box precedes the error message copy in addition to an "x" near the relevant field to indicate an error has taken place.

 
Home depot account registration

 

IMAGE: HOME DEPOT

Colblindor's simulator will again display how all red and green hues are removed, but instead, users may relay on shapes as an indication to actions done right or wrong.

 
Home-depot-red-color-blind

 

IMAGE: COLBLINDER

Test out your pages with Colblindor or simply change your settings to gray scale to ensure usability does not break when colors go away. Send us before and after shots if you found you had to fix some elements for accessibility on TwitterFacebook, or Google+ using the hashtag #colorbind (that's colorb-i-n-d; no "l"). 



Category: Graphic Tutorials

SOURCE: http://mashable.com/2014/04/22/web-designing-colorblindness/

Add Pingback

Address

Creative Orange Design - USA

  • Suite 519 - 1904 Franklin Street
  • Oakland, CA 94612
  • Located in the Heart of Lake Merritt
  • (By appointment only)

Quick Links

Creative Orange Design is a graphic design company serving San Francisco, Oakland, Berkeley, Calgary, Canada and around the world.