Signage and color contrast

Within signage & wayfinding design the way of color and contrast are important factors to effectively communicate a message. Colors have different meanings and work in various ways in contrast together. This article will explain the meaning of color and will show various examples of contrast.

Contrast between the foreground and background is one of the most important factors for the ease of reading. If coloured text is used on a bright background the contrast will be weak, for optimal contrast results is white text against dark colored backgrounds. In signage & wayfinding design color is the combining factor to harmonize the sign with the environment. Color programs will distinguish signs from each other and can offer an indication of the message without having to be able to understand the language of the sign.

Basics of color groups: Color wheel

farbkreis_itten_1961 Swiss painter and designer Johannes Itten created a color wheel that is a organization of 12 color hues around in a circle showing relationships between the colors. The colors are presented in the following way:

Primary colors: Blue, red & yellow
Secondary colors: Green, orange & violet
Complementary colors: Red–orange, red–violet, yellow–orange, yellow–green, blue–violet & blue–green.

Most color wheels are based on Goethe’s Theory of Colours, the first systematic study of the physiological effects of color (1810). His observations on the effect of opposed colors led him to a symmetric arrangement of his color wheel, “for the colours diametrically opposed to each other… are those which reciprocally evoke each other in the eye.” (via wikipedia)

The color wheel can be a basis for the color scheme for the design you are about to create. Using the wheel you can easily find the combinations between the colors and see what works best. See the opposite colors and combine the colors into a signage color scheme.

Meaning of color

Black is not actually a color but is often used as background surface in sign design, black can offer a attraction in a visual crowed environment. Meaning of black: Black is associated with power, elegance, formality, death, evil, and mystery.
White as background surface has the ability to absorb dark lettering into its surroundings, in order to make white work good in sign design use a matted surface with glossy lettering. Meaning of white: White is associated with light, goodness, innocence, purity, and virginity. It is considered to be the color of perfection.
Red is a signal color, as background red is mostly used for warning signs. Meaning of red: Red is the color of fire and blood, so it is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.
Yellow in sign design is used as background, yellow has a function of sending out a message and works good in a spacial environment, it stands out. Meaning of yellow: Yellow is the color of sunshine. It’s associated with joy, happiness, intellect, and energy.
Blue is one of mankind favourite color, but for design blue will not always have the best results, try using various hues of blue to find the best matching results. Meaning of blue: Blue is the color of the sky and sea. It is often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.
Resource the meaning of color further on this page.

Black background

contrast-black In sign & wayfinding design contrast will let you read the signs at ease. Below you will find various examples of good and bad contrast in order to make the design work.

With a black background the lettering tends to stand out more onto to background than with other colored backgrounds. Black is one of the few surfaces that lets other colored text work great together. Beware of too small lettering with too high contrast (white lettering), these will lead to less legibility of the text because of overwhelming background. With large lettering white on black works great. Also yellow on black is a good combination.

Advisable work areas: Airport signage, office building signs, visual overwhelming environments, hotel signage, indoor usage.

White background

contrast-black White background surface gives the most workable combinations, but beware of that white can absorb its environment. Black lettering tends to be squeezed into the background making it hard to read. Lower contrast lettering gives better results like blue, orange and red.

White backgrounds can be used specific sign projects where design plays a bigger part than the actual wayfinding. For instance using silver lettering on a white background can give fabulous results, due the shadow of the silver lettering the text becomes readable on the white surface.

Advisable work areas: Museum signage, office building signs, pylon signage, retail signage, hospital signage, indoor & outdoor usage.

Yellow background

contrast-yellow Yellow background works best in visual crowded environments, for architectural and psychological factors yellow is often used. Yellow with black lettering sends out a clear information message which is needed in such an environment. Using yellow also makes in easy to use orange, red and green which all work great together in a signage system.

Yellow is a much used background color for airport signage, originally started by Paul Mijksenaar for Schiphol Airport signage, nowadays yellow is seen in many airports around the world. Yellow in combination with black lettering gives ease to read and at the same time a clear information message in its surroundings.

Also for traffic signs yellow works good as background color in combination with black lettering. In a outdoor situation, yellow stands out from its background giving a clear message. In many European countries yellow is chosen as background color.

Advisable work areas: Airport signage, road signs, public spaces, indoor & outdoor usage.

Red background

contrast-red Red is often used for warning signs, red sends out a signal of warning, danger. Many of the warning signs consist of a red background with yellow or white lettering, by using pictograms as warning the signs are multi-language and don’t need explanation, even if you cannot read the text.

Red is a very powerful color which stands out in a visual crowded environment. I have seen various other signs produced with red but in my opinion red is a signal color. Works great with black, white and yellow lettering.

Advisable work areas: Warning signs, public spaces, indoor & outdoor usage.

Blue background

contrast-blue Blue is one of mankind favourite color, as is represents sky, heaven, trust and faith. The color blue is good recognized with white lettering as information sign. In the Netherlands all highway signs are with blue background as well as the railway signs.

To use blue in sign systems beware of create enough contrast in order to make the signs work best. For instance with light blue a higher contrast lettering will be needed such as black and for dark blue white lettering will work best.

Advisable work areas: Highway signs, railway signs, hotel signage, retail signage, public spaces, indoor & outdoor usage.

Purple background

contrast-purple Purple will not be your direct usage of background color for signage color systems, but purple is a fashion color which is asked by clients to use. Purple works great with lighter colored lettering such as white or yellow.

Purple can be used in signage systems but beware of its architectural environment, as purple is a very powerful color it can easily fade into the background making the sign unreadable.

Use the color wheel to create the hue of colors around the color purple. Purple represents royalty and spirituality, it was Pantones color of the year 2008. PANTONE® 18-3943 BLUE IRIS.

Advisable work areas: Museum signage, hotel signage, retail signage, indoor usage.

Silver (brushed) background

contrast-silver Silver (metal) is an often used color as background in sign systems. With metal signs you are able to gain a robust look & feel for the signage system. Metal has a different surface when looking at it from different angles, making it not always a good contrast with the lettering.

On a silver background almost all colors work well, even white. In future articles I will go deeper into using silver as background.

Metal signs are frequently used in office signage, with black lettering it will create a very stylish look and feel.

Advisable work areas: Office signage, nameplate design, public spaces, indoor & outdoor usage.

Typography & color contrast

Not only is the contrast important also the chosen typeface will make the difference in a good or bad sign. When using too bold weighted typefaces the text will look like its expanding of the sign, when using too light weighted typefaces the text will fall back into its background. Medium or Regular weights are usually the best options to choose for a good and readable sign.

Please share your thoughts

What do you find the most attractive/readable colored background?
Looking forward discussing about colors & signs! Thank you in advance.

Review: WhatTheFont for iPhone

WhatTheFont, a great tool to check a font from an bitmap image. For years the tools is to be found online at myfonts. I have used this tool many times before and was wondering if it will become available for iPhone. From January 2009 this tool is released for iPhone users and now you can take a photo and identify the font using this new iPhone App.

WhatTheFont iPhone App

This is a review of WhatTheFont for iPhone App, I will go into every step of identifying a font using this App & a iPhone. I will try to get the results as stated from the myFonts website: Identify the fonts in a photo or web graphic! .

Ever seen a great font in a magazine ad, poster, or on the web and wondered what font it is? Whip out your iPhone and snap a photo, and WhatTheFont for iPhone will identify that font in seconds!

WhatTheFont iPhone App is free available from the iPhone store created by myFonts.

Let’s get started!

Downloaded the tool into my iPhone and started the program, as you can see in the splash screen there are two options. One is to take a new photo or you can select a photo from your photo-roll in your iPhone. I selected the first option and took a new photo of the Apple Airport box. When taking a photo use the following tips from myFonts:

WhatTheFont works best with just a few, large letters. Keep the text to fewer than 20 characters.
Try to get the text as close to horizontal as possible. (Pretty hard to manage with an iPhone)
Avoid connected letters (as in logo’s or cursive handwriting)
A well-lit, uniform-color background works the best

With this Airport example I adapted the above steps and started working with the photo and selected use photo. Now I am able to use my fingers onto the photo to draw a box around the text. At first it seems pretty hard to get a good box around the text, but after some experience it worked better and betters. You can also rotate the photo by rotating your iPhone, I found this not very helpful and I would suggest to take the photo in a standing up position. When you have selected the desired text to identify hit the right top corner Upload. The App is uploading the cropped image to myFonts to identify the font.

Check Characters

In this step of identifying a font you can see the results of WhatTheFonts character guessing. The App shows you every single letter of the selected text and you are able to remove characters from identifying by selecting the red icon left from the letter.

Some characters such as the letters i WhatTheFont separates the stroke from the dot. You can merge these two images for betters results in identifying the font. This needs some practice, try selecting two images with two fingers, the boxes turn grey and you are able to move them towards each other, the tool then merges the letters and you only need to fill in the correct letter in the right box. Hit the box and the type-in screen appears.

When you are done modifying and inserting missing characters hit Identify! and the right top corner. The App communicates with myFonts and presents you with the results.

Font Identified!

The font is recognized! In this case the font Myriad-Pro Semibold is found as to match, further on various other close fonts are mentioned for you to pick the perfect match with the taken photo. I have run this example a few times, 3 times out of 4 it gave this results, not bad in my opinion.

When selecting the identified font you are presented with two options: One send an email containing a link to the myFonts website or you can open the link on your iPhone with Safari browser. The most powerful option (for me) is sending a link by email, this way I can check the typeface

Visiting the myFonts website allows you to buy and see all the font details.

My findings

I simply love this tool for my iPhone, it gives me freedom to take shots where ever I am and quickly find out which font it is. A few details that I don’t like about this tool:

When first installed the App crashed many times, I needed to clear the iPhone memory by a hardware restart in order to make this tool work better.
Taking a horizontal shot of text is not very easy and the letters on the photos are quickly a bit blur, so WhatTheFont cannot recognize the font. I know this is partly due the low quality camera in the iPhone.
Indoor shots are not always recognized correctly due the low contrast background.

My Suggestions for WhatTheFont iPhone App

WhatTheFont for iPhone is currently in version 1.0, I have some suggestions to improve this tool and make it even more useful:

In the crop image selection should be these two options: a contrast slider to get a better separation between text and background and the option to sharpen the image. I believe with these two options you will have better results in identifying the fonts. Even better would be a function to apply an auto adjustment to the cropped text (like in Fireworks/Photoshop). I used the iPhone App Photonasis Lite to enhance photos for better recognition.
Add more separation in boxes at the Check Chars step, when trying to delete characters I kept hitting the wrong box and got the typescreen.
Use a timestamp and Google maps location when sending a link by email, this way I will know when and where I was when I saw that particular font.
When a font is not recognized use a option to send the image to the WhatTheFont forum to find out if anybody else could help me finding out what font it is.

Requirements and information

For iPhone and iPod Touch with the latest firmware update. With the iPhone you can take photos and use them in the tool, for iPod Touch users you can only use the photos from the photoroll (no camera).
Wifi connection or mobile network to upload the photos and see the results.
Fonts, fonts and more fonts!
Visit the website myFonts to read more about this great iPhone App WhatTheFont
Download and install WhatTheFont on your iPhone.

Conclusion

I like the WhatTheFont iPhone App a lot, it might needs some more approvements but my iPhone is turning into a complete design studio at the moment! Love it! The succes rate for identifying fonts is (with good photos) I guess somewhere around 75%.

Go try this tool, I am looking forward to your findings in the comments!
Thank you in advance.