Yes, I painted my office black. While working in a black room 40 hours a week minimum may sound depressing on paper, I love my workspace — black walls and all. Black is a neutral to me. It inspires creativity without influencing my color palette.
So why do black walls work unexpectedly well for an office? Knowing some of the basics of color psychology, and how they can affect perception, is an essential tool for any designer who makes intentional design decisions — whether it’s interior design or web design.
There are a number of traditional characteristics of color that every designer keeps in mind: value, saturation, contrast, and — especially for those in web design — legibility. And these characteristics are only being enhanced in the digital era.
How light or dark a color is is referred to as its value. Value describes the overall strength of the lightness.
Saturation, on the other hand, refers to the dominance of the color. Take black as an example. When you first look at the graphic below, both blacks may appear the same, but how you got there makes a big difference. When a printing machine prints color, black can be made by just black ink. However, true black combines all the colors in CMYK — cyan, magenta, yellow, and black. This is rich black which means it has dark value and is fully saturated (using all the colors mixed to make black).
Contrast is a biggie in design and understanding how to make it is a good recipe to know. Yes, black vs. white is an easy contrast, but developing contrast via color intensity is another way to enhance your design.
You can add contrast without changing the color value (lightness of the color) by using complementary colors (think: yellow with purple or orange with blue). Look at the client's palette and the primary colors they want to feature. What are the complementary colors, or the colors opposite on the color wheel? Knowing how colors will bounce off each other will help you quickly make intentional design decisions.
For example, if a client has a signature purple and it appears to be darker than in the branding guide, look at the surroundings. A darker color around the purple can give the illusion that it is lighter while that same purple surrounded by white may appear brighter.
There are hundreds of books and dozens of articles that talk about legibility, or how easy it is for our eyes to read any given text. The main reason to have text on a page is to convey a message to the reader. Color affects the way the reader sees the text, which means the color of the text and the color of the background are critical to its legibility.
We now live in the age of screens. We read in a different size, adjust lighting to our preference, and look at the designs on our blue-light filtering devices (or while wearing blue-light filtering glasses).
Believe it or not, your screen is made up of just three colors — red, green, and blue — to produce all your screen’s visuals. Crazy, right? So naturally, removing or toning one of the three colors is going to affect the amount of light as well as the perception of what you see on the screen. Designers make sure they choose colors that have good value and saturation, so even someone wearing those blue light glasses gets the best visual.
There’s also a general standard for a guideline called the Web Content Accessibility Guidelines (WCAG). It reads like a cookbook — you can take all the guidelines literally or you can look at what they’re doing and make some modifications based on your design’s need.
Another good guideline to look into is the AA requirement or AAA. According to the UX movement, “Meeting the AA requirement is sufficient for the majority of users. The AA requirement constitutes a contrast ratio of 4.5:1 to compensate for the loss of contrast sensitivity by users with a 20/40 vision loss.”
Not sure about what your design legibility is? A great way to check is to run it through a readability engine. This is also a good tool for when you are setting up a project to look at a client’s current site and see how it performs.
Color has a huge role in design, and I’ve only just scratched the surface on the basics. The more you dig, the more you uncover and understand. Ever wonder why that art professor or that rockstar designer on your team simply looks at something then knows what is wrong with it? It’s all due to experience and knowledge. The more you do and the more you learn, the easier it is to use the tools every designer needs in their creative toolbox. Want to see our creative toolbox? Check out our work, capabilities, and contact us today.
Sign up for our email newsletter. Nothing spammy about it. Just a monthly rundown of what we’re sharing.
