Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Color in System Messages

In web and user interface design, designers often have to designate colors for warning messages. Examples of warning messages include error message that appears when a user makes a mistake in the process of completing an action; or alert message that appears to warn users of a potential consequence that they need to be careful of if they click a certain button.

There are conventions that are widely accepted by most users nowadays in terms of colors.

First, let’s talk about the color red.

Typically, red will automatically be associated with either a warning or something which is crucial to see. Although the reason why will vary depending on who you ask, there are several examples you can find if you look a little closer at your day-to-day apps.

For example, take a look at the “Close” button in the top right of your browser right now. Go ahead, hover your mouse over it. Red. This is because you are being warned of your decision, and almost encouraged to think twice before exiting your session.

Red is also the typical color for error messages. When you see red text, it means something is wrong.

But there is a complication. There are a lot of brands that use red as their primary brand color. McDonalds, PepsiCo, CNN, Lego, just to name a few.

What happens when their brand colors coincide with error message colors?

There are a few best practices designers can follow to ensure that red still works as error message.

The first thing to do is make sure that red is used sparingly and only reserved for important elements.

If designers keep red at a minimum, users won’t be desensitized to red in the design, which allows then to still be alert when they see red in error messages.

The second thing to do is to vary the shades of red in brand colors and error message colors. In most cases, the red used in brand colors is not 100% saturated or 100% in brightness. To differentiate error message red with brand color red, designers can designate a brighter and more saturated version of red to associate with error message, which will still stand out.

Next, let’s talk about green.

Green is typically associated with success in user interface design. If you see a green button or text, it usually gives you confidence that the action is successfully performed. It is strongly associated with traffic lights and how green light usually means pass.

When choosing the shade of green to use as success messages, it’s important to remember that if the shade of green is too dark, it wouldn’t appear to be like success messages anymore. It will appear more like a brand color. That’s why we recommend staying with green shades that are a little bit brighter and medium in saturation.

The next color we want to talk about is yellow. Similar to red, yellow indicates warning, but it doesn’t indicate errors all the time. It carries less of a strong meaning than red. In many situations, it has the connotation of “proceed with caution” like we can see in this system banner design.

Finally, let’s talk about the color blue in system messages. Blue is a rather neutral color, compared to red, green and yellow. It usually indicates information that users might find helpful, but it doesn’t carry any positive or negative meanings. So if a designer simply wants to put up a system message providing additional information, blue is a good choice.

Scroll to Top