Colors have so many considerations that the challenges only add to the struggle. We will discuss these three areas in this article.
- Equipment Calibration
- Theme Colors
- Adjusting Content
There are other areas, like helping people who are completely or partially color blind, but we will save those for a future discussion.
Equipment Calibration
As we worked on another of our sites, Budgeting Today’s Coaching Page, we noticed that the site background had a greenish tint on our laptop monitor. We went to the desktop to find a way to correct the color issue, but it wasn’t obvious enough.
Google to the rescue? Perhaps, but it took a few tries to find what we sought. We use three monitors.
- The laptop
- The 32″ second monitor
- The Graphics Tablet Monitor
We also had some advice that using a recent enough iPhone could assist in the adjustments. We loaded the same page on my iPhone as the computer monitors as a base reference of more accurate colors. Then, I followed the steps in the link.
- Open Control Panel in Windows.
- Search for color management and go to the advanced tab.
- Click the Calibrate Display
- Follow Instructions
It told us to move the calibration window to the screen we were calibrating. We did this for each window, and now our colors are reasonably close. We are not looking for super accuracy here, but we do want them to be reasonably close.
Theme Colors
The goal here is all about user experience. When it comes to colors, there are a few things we think about for our sites or sites we do for our clients.
Color Psychology
This has a great introduction at Color Psychology: A Guide for Designers, Marketers & Students. These are guides; if your live market research says your audience is acting differently than the typical, expected results, go with reality. If your gut feeling disagrees, validate the colors before you commit.
Usability
The colors also will make your site more or less usable. So many websites use colors and backgrounds that make the text on the site hard to read. Buttons and themes should be consistent throughout the site. You may want to create a style guide to work with that challenge.
Color Science
On paper, we mix cyan, yellow, and magenta to make the colors we want. The more we mix, the darker it gets until we have a nearly black result, mixing all the colors at full strength.
With monitors and projectors, we mix red, green, and blue. The more we mix, the lighter it gets until we have white with all three mixed at full strength.
We also have colors that naturally look good together, washed colors (a.k.a. desaturated), and colors that do not. After we learn the basic color we also have to master expressing the color in a way web pages understand. A basic color picker can be found at HTML Color Picker (w3schools.com). At the top of the page you will also see a small circle half filled. It allows us to swap between dark mode and light mode.
Now, from HTML to WordPress and beyond, we have to know how to get that color to the element we target for our pages. There are too many options to cover in a general post like this.
Adjusting Content
As the web grew, we had content editors we classified as WYSIWYG (What You See Is What You Get). This was helpful in creating content that was delivered as expected to the end users. However, it was also awful because we tend to update our sites and change the basic color schemes. When this happens, customized colors from WYSIWYG editing tools create bad user experiences.
The simpler solution for some was creating content with MarkDown. This was content that packaged different types of content with surrounding meta symbols to guide the server to know what type of display the content would have, without it being color corrupted by the extra features of WYSIWYG editors.
These days the inline editors have replaced the WYSIWYG tools, and they leave out the features that will be corrupted by a site theme upgrade that might change in the future.
Recent Comments