Mastering colour and the best resources for colour accessibility

Colour palette from Design-seeds.com

Colour palette from Design-seeds.com

 

Colour has always been an important part of design. It sets the emotional tones to stimulate feels and create a perception of warmth, luxury, cool, fresh, cheap or energy. Whatever brands want you to think. While colour may be a subjective issue,  colours also have a universal meaning. For example: blue is a cold color and red is a warm color.

It is the preference for certain colours that are subjective. The meanings of colours for luck, death, and others vary by different cultures.  In India, yellow is said to have been made from the urine of cows, force-fed mango leaves.

In mediaeval Europe whole towns rose on the profits from a plant that made a valuable blue dye.

Colour is not as static as we think it is. Colours in fashion  change and technology has an impact. The web safe colour palette was design for the internet and the way monitors display colour. That model is becoming outdated as the internet moves off  computer monitors and lap tops to tablets, the TV and onto glass.

Moving into internet tv and digital glass

Digital glass technology is getting closer to being released and with it augmented reality glasses, panels and any surface becoming a display. I wrote about this in a previous blog post “A world made of Glass”. These technologies change the way colour is presented. The 3D TV is also using colour differently. Up until now everything has been two dimensional and with an “implied transparency”.  The colours lack true purity.

magenta throated humming bird
Magenta throated humming bird

When choosing colours for a 5 step process I opted for a magenta (instead or red). There were the obvious problems of  using red and green together or worse using it as a background for text that would fall a foul of accessibility compliance. The colours need to work on all mediums and in presentations.

Anyone with a background in print design would view magenta as a primary colour, along with cyan, yellow and black. In printing a primary red is achieved by mixing in yellow and small amounts of blue.

In painting it is a similar thing because the medium does contain colour or “weight” and the colours loose purity. You cannot get a true magenta from mixing red with blue. Adding white and small amounts of blue will get close but it will not be a pure colour.

Is everything we have been taught about colour wrong?

The primary colours that we are used to using are not the only primary colours. Painters know you cannot get the colour Cobalt violet from mixing red and blue. The colour will be a dull muddy prune colour.

magenta as a primary colour

Petrônio Bendito's cololur model

Most of everything we have been taught about colour has to do with the mediums. If you ask a lighting director about colour you will get a different answer.

The RGB model which we have all been taught as web designer you get magenta by mixing green and red. In paint this is brown.

The way I was taught about colour is entirely different to today and where things are going. Some of the libraries and theories are the same.

Petrônio Bendito’s Master thesis ‘Perceptual Analysis of the RGB Color Cube’ has led to the development of a perceptual notation system. (see diagram) This notation has been greatly influenced by the works of Munsell, Birren, and Ostwald.

From Will Longaphie  “Everything you know about colour is wrong”

This is the basic 6-colour chart that most people are familiar with. I’m here to tell you this is completely wrong.

Primary colours

Below is what you would actually get if you mixed these primaries (yellow and red, red and blue, blue and yellow) together.

mixed

Tell me there isn’t something horrifyingly off here. Why do we teach this wheel to our kids when it clearly is so wrong in the first place?

 

No wonder so many people grow up afraid of colour in North America.

Now this colour wheel should make (visual) sense. You can clearly see how you can now move through this colour wheel to reach the next (logical) hue.

The problem with magenta

magenta flowers

Are the flowers to blame? ;-)

The biggest problem is the prejudice over the idea of the colour pink. “Pink is for girls.” Magenta is a pink. Sexist ideas always come up with pink. This is not without some factual truth that girls and women do show a preference (in mass surveys) towards the pinkier shades.

One of the stories was of a prison in the US where the warden made the men wear pink overalls and live in a pink prison. He claimed it reduced problems with violence, fights and depression among inmates.

In design this could  be part the frontier of sexism as there is such a strong reluctance to exclude pinks except where the product is almost exclusively marketed to women or gay men. Considering a 50% of the population female and that women are the primary consumers it is time to focus on the reasons why people like the colour appropriately without the cliched stereotypes.

The other is a scientific point that magenta and purple do not appear in the rainbow because the colours necessary to produce them do not occur in the visual spectrum. This where the problem occurs as magenta is described as, “It is an extra-spectral color, meaning it cannot be generated by a single wavelength of light, being a mixture of red and blue wavelengths.” Specifically this wave lengths are outside the our visual range. Thus the rainbow is not a representation of all colours.  There is no purple in the rainbow.

Magenta and purple do occur in nature and are considered widely to be beautiful and rich colours.

Pinterest: Proving women love pretty colours

Artist and scientist Stephen Von Worley  used colour names from a massive color survey and turned it into a visualization of color names women and men use. The result? Women like a little metaphor: “coral,” “camel,” “dusty teal.” Men, on the other hand, go for the literal stuff: “blood,” “crap,” “mucus” (ie. anything in a Matthew Barney video).

One of the most popular categories on Pinterest is colour. If anything it has proved how much people love colour and more specifically images with harmonious colours. Harmonious colour combinations create feelings of comfort and serenity.

Pinterest colours

From the colour survey results  wrote “the color names most disproportionately popular among women” are:

  1. Dusty Teal
  2. Blush Pink
  3. Dusty Lavender
  4. Butter Yellow
  5. Dusky Rose

Looking at the image of Pinterest above it would seem he is correct. The overwhelming amount of images seem to be towards the dusky, buttery and dusty tones.

Pinks do feature a lot but perhaps this has to do with colours that are harmonious and create feelings of warm and comfort.

infographic link

Click on image to view full size image

Something I have been talking about for a long time is to use this to advantage to create retail (an online) experiences that meet the needs of women. The majority of household shopping purchasing decisions (apart from car and entertainment system) are made by women. Retailers have been slow to make their sites more sites female friendly.

However times are changing. Especially in home accessory shops. Retailers know this when creating product lines so that things co-ordinate. Some retailers like Brissi and Mason whole brand is a restricted palette of neutrals. The products for their shops are curated. In retail there is a symbiotic relationship between design and outcome in the number of sales. Certain colours sell out faster. Yellow and oranges are tricky colours for fashion and do not sell as well items in blue. A lot of men still avoid wearing pink or lavender shirts

colournames

From the Dog House Diaries http://thedoghousediaries.com/140

Some of the more commical observations from the survey were

  • If you ask people to name colors long enough, they go totally crazy.
  • “Puke” and “vomit” are totally real colors.
  • “Piss yellow” was a common colour for men.
  • Colorblind people are more likely than non-colorblind people to type “fuck this” (or some variant) and quit in frustration.
  • Nobody can spell fuchsia.

 

Design is mainstream, we are all curators

People have so much choice when it comes to the amount of shades available from everything from paint to kitchen cabinets in purple. The original pack of Crayola crayons contained 8. Bt 1971 the the number of colours had grown to 64. Now there are 120. Colours are now retired to make room for new colours.

Gone are:

  • Blizzard blue
  • Magic mint
  • Mulberry
  • Teal blue

 

The most recent additions are: 

  • Inch worm
  • Jazzberry jam
  • Mango tango
  • Wild blue yonder
crayola_crayon_color_chart

Crayola colour chart

It is all to do with the power of colour on desirability. Colour is easier to change. Every season there is a palette of colour options. Designers know not to offer one but to offer 5 aimed at something for everyone. Packaging that is beautiful is more likely to end up in girls bathroom than a good product that looks cheap. It is why we now have “designer dish washing liquid” at £15 a bottle when the supermarket variety is about a £1.50.

What is colour harmony

purple

The Munsell purples. Nothing rhymes with purple.

The relationships between colour and emotion have long been of interest to both artists and scientists.  In branding and marketing colour is used to evoke emotions to  create a desired feeling to  influence consumers’ behaviour. Colour helps enhance brand recognition and translates the intended visual impressions into the design elements of a product.

This also factors in common standards such as traffic lights, red for sale (colour of high visibility) the colours people associate with terms like – cheap, luxury, futuristic, retro. Numerous studies have been done as to how people are influenced by colour.

Kissmetrics made a great infographic on how colors affect purchases.Susan Weinschenk, Ph.D. in Psychology and author of Neuro Web Design: What Makes Them Click? (Voices That Matter), wrote an interesting piece about it. The McCandless Color Wheel can be downloaded from the bottom of her webpage.

Colour Munki has a tool for designers at http://colormunki.com/ that allows user to upload images and create and manage colour palettes. This is compatible with Adobe products and uses both the Munsell and Pantone libraries.

Colour Lovers for guides to creating colour harmonies http://www.colourlovers.com/palette/1169818/Cobalt_Analogous

Colour systems for understanding how to work with colour

Albert Munsell saw balance as a key factor in determining colour harmony.  Albert Munsell was keenly aware that a practical theory of color did not exist. From his own work and experiments, he developed the Munsell Color System. Using his system made it possible to discuss color scientifically.

colour game

He defined color in terms of Hue, Value and Chroma. Hue was defined as the actual color, red, blue, green, etc. Value was defined as how light or dark a color is. Chroma was defined as how strong or weak a color is. He published a standard color atlas defining the Munsell Color Standard which, before his work, had been an impossible task.His work was embraced by the scientific community. In 1914 he was invited to present his findings to the scientific communities of England, France and Germany. His theory is still taught today and the system is available at  http://munsell.com/

There is a great game that illustrates clearly hues, shades and saturation  http://color.method.ac/

Click on the image to see if you can beat my score.

Sensitivity to Colorblind Deficiencies

Almost men in every have some type of colour deficiency. In the last few presentations I have done I have asked if anyone had a problem distinguishing between red and green. My findings have supported this. For this reason even my presentation material is compliant. The last thing I want to be doing is talking about usability and accessibility with material that does not support the needs of my audience.

The biggest sin is to use colour alone to differentiate items. The web is needs to be used by all people. Most web designers are sensitive to the needs of users and avoid using certain colours and combinations for text, if only to be compliant with the disability act.

Success Criterion 1.4.3  of WCAG 2.0  requires the visual presentation of text and images of text has a contrast ratio  of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement

The Web Content Accessibility Guidelines (WCAG 2.0) have been created to enable web developers to create accessible content. Part of these guidelines are related to creating good colour contrast and ensuring that foreground content stands out from background content.

Most of it should be common sense as you can see when colour contrasts are not sufficient or  the chroma values are too similar. Chances are it does not look great either with orange text on a blue background. Would you want to read it?

  1. Colour blindness simulator http://www.colblindor.com/coblis-color-blindness-simulator/
  2. How people with disabilities use the web. www.w3.org/WAI/intro/people-use-web/Overview.
  3. A lovely air tool for viewing colours for accessibility 

In the  illustration below this depicts why green and white is a tricky combination. The green shade would need to be very dark, towards the “forest green” shade, in order to be compliant. This is why most web designers include a key line and some shadowing on link buttons as well as a rollover state.

The orange shades suffer the same fate and need to be almost brown. Pink, blue and purple all have brighter shades that pose no problem. This is because it is extremely rare for people not to be able to “register” blue.  You can have black text on all “pure” colours except red.

It is a myth that cats and dogs are colour blind. There are more like the 8 men in every hundred which have some sort of colour deficiency. They are not colour blind, just unable to see the full spectrum.

The most common one for males is include red & green vision deficiency. This is not true colour blindness. True colour blindness is extreme with only shades of grey visible. This is found in people with Monochromacy/Achromatopsia which is very rare. Blue is the easiest colour. Shades of blue are also the most easiest for mixing and matching in a one colour scheme. All of the other colours – pinks, oranges, reds, purples and greens can clash depending on the shades chosen. For men it is by far the most popular colour for clothing.

White and green a tricky combo for accessibility
White and green, a tricky combo for accessibility.  

 

 

 

 

 

 

 

 

 Thanks for reading please share or leave a comment!

Similar Posts

Gorillaaxure think outside the box in vintage wood type Blue butterflyJ january 21010 632 iStock_000011722404Small

1 Comment

  1. Shashi Jain says
    30 May 12 at 1:27pm

    Its a very helpful post, also I like the design of your page itself!

    (reply)

Leave a Reply