Color Theory
Color theory is an evolving discipline, from the nature of primary colors to the way color can affect mood and perception. There is no doubt that color has a large impact on how sites and applications are built and how the user interacts with them. To help us understand how colors work and interact with each other, we’ll classify them into warm and cool colors.
Warm Colors
Here we find colors generally related to energy, passion, and strength.
- Red: Associated with anger, fire, and violence but also with danger and energy. Red has also been shown to increase blood pressure and increase metabolism, which is why it is very popular with food products.
- Orange: Related to change, autumn and creativity. Because it’s not as strong as red, it’s often used for warnings.
- Yellow: A bright and energizing color associated with hope, happiness, and the sun. Darker golden hues can convey a sense of permanence.
Cool Colors
These colors generally convey calm, relaxation and professionalism.
- Green: Usually representative of wealth, stability, renewal, and nature. It can have a balancing and harmonizing effect.
- Purple: Related to wealth, status, and luxury. Purple is a combination of red and blue and takes on some attributes of both.
- Blue: Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues, like navy, are excellent for corporate sites or designs where strength and reliability are important.
Contrast Ratio
Working with the web is not easy. You have to support different browsers, multiple devices with various screen sizes, different languages, and timezones. Beyond that, you need to take into account users with special needs, and this is where color becomes very important. For accessibility, the Web Content Accessibility Guidelines (WCAG) offer a set of rules to help developers understand how to place colors on the screen. All the rules are based on the contrast ratio, which is a measure of the difference in perceived "luminance," or brightness, between two colors. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).
For text and images of text, the minimum contrast ratio (Level AA) is 4.5:1, with certain exceptions like large text with a contrast ratio of 3:1, logotypes, and incidental text or text that serves a purely decorative purpose.
There is a much more strict guideline for text and images of text which is known as Level AAA. The only difference with Level AA is that the minimum contrast ratio is 7:1, except for larger text where it is 4.5:1. Though this higher guideline is recommended, laws and standards are often met with Level AA contrast.
For non-text elements like User Interface Components and Graphical Objects, the minimum contrast ratio is 3:1 against adjacent colors, which means you may need to measure in more than one place: for instance, if you have an icon with two colors, you’ll need to measure the contrast between those two and between the background color of where you are placing the icon.
There are several tools to evaluate the contrast ratio on your site, but one of the easiest comes baked directly into the Chrome DevTools. You just need to select the element you want to inspect and then click on the color picker. Then you’ll be able to see the contrast ratio and the compliance with Level AA and Level AAA.
There are also times when you’ll want to check the contrast ratio from within an app. For example, things like email composers, website builders, or in general WYSIWYG tools can be customized to check the ratio between background and foreground colors. In such cases, tools like color-contrast or color-contrast-checker can help you to evaluate the contrast and warn users when they are picking problematic colors.
Color Spaces
Color spaces are a way of describing a specific, measurable, fixed range of possible colors and luminance values. They are also a tool for understanding the color capabilities of a particular device or digital file. This has some interesting implications for web developers. Think about it this way: it’s not the same to show a brand’s color for a t-shirt as it is on the background for a website. The first one may be obtained via chemical reactions and the second one via LCD or LED screens, which means they require different ways to describe the color.
Two of the most common color spaces are CMYK and sRGB. CMYK is used in the printing process because, according to Wikipedia, it “describes what kinds of inks are needed to be applied, so the light reflected from the substrate and through the inks produces a given color.” The second one is intended as a common color space for the creation of images for viewing on the Internet and the World Wide Web.
Bear in mind the difference between color spaces and color models: A color model is a mathematical abstraction used to describe the way a color is represented. So for the sRGB color spaces, we use the RGB color model, but this color model also can be used for the Adobe RGB, Adobe Wide Gamut RGB, or Rec. 2100 color spaces.
There is an interesting concept in color spaces that is particularly useful for developers and that is perceptual uniformity: the way humans perceive the difference between two colors. For instance, trying to get a gradient of similarly spaced colors between green and blue in the sRGB space would yield something like this
As you can see, it’s hard to notice the difference between the green colors, but the blue ones are easier to distinguish. This is because sRGB is not a perceptually uniform color space. For a color space that takes into account human perception, the International Commission on Illumination has created several color spaces like the CIELUV or CIELAB. These spaces provide a better model for perceptually uniform colors, and this is a big advantage when working with colors in code. Things like autogenerated color palettes or color suggestions for a background color require the code to be aware of human perception. Also, heat maps or other statistical analysis tools need perceptual colors to match the difference between data points. In this case, things like uniform color spaces and color differences are the appropriate tools for the job.
Here at FullStack Labs, we produce high-quality solutions using our knowledge of best practices, such as color theory, ratio, and spaces. If you like what I posted above and would like to join us, please visit our Careers page. If you would like to reach us for any other reason, please contact us. We look forward to hearing from you!