Mastering colour and the best resources for colour accessibility
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.
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.
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.
Below is what you would actually get if you mixed these primaries (yellow and red, red and blue, blue and yellow) together.
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
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.
From the colour survey results wrote “the color names most disproportionately popular among women” are:
- Dusty Teal
- Blush Pink
- Dusty Lavender
- Butter Yellow
- 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.
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
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.
- Blizzard blue
- Magic mint
- Teal blue
The most recent additions are:
- Inch worm
- Jazzberry jam
- Mango tango
- Wild blue yonder
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
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.
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/
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.
- 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?
- Colour blindness simulator http://www.colblindor.com/coblis-color-blindness-simulator/
- How people with disabilities use the web. www.w3.org/WAI/intro/people-use-web/Overview.
- 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.