Skip to main content
106 votes
Accepted

What color to choose as "danger" if the main color of my app is red

I think you need to play around. If your screens are red and you are about to use a warning or Danger. I have the following suggestions: 1- You can still use red but in different degree in order to ...
Khalil Hanna's user avatar
  • 1,264
96 votes

Best error color on blue color?

MD guidelines aren't rules The Google Design team wanted to provide a good selection of colors for app devs who can't think in color. It's a solid palette (the whole UI framework is great), but it ...
plainclothes's user avatar
  • 21.3k
92 votes
Accepted

How do you decide UI colors when logo consist of three colors?

As written in the comments, it's not easy to define a color palette without all the conceptual and technical information of the project. This answer is somewhat technical and generic based on three ...
Danielillo's user avatar
  • 19.2k
91 votes
Accepted

Should software for 8 to 14 year olds be colourful and "childish"?

What you have described here is not 'childishly' colourful - The colours represent different information: the colour has meaning beyond decoration. Scratch colour codes its code blocks according to ...
Roux Martin's user avatar
  • 14.2k
60 votes

Is colour alone enough to convey warning?

No, it is not enough. This is how your image looks for people with achromatopsia (grayscale vision) This with Blue-Weak Tritanomaly This with Blue-Blind Tritanopia As you can see, there are evident ...
Devin's user avatar
  • 38.1k
56 votes

What color to choose as "danger" if the main color of my app is red

Rather than focusing just on the colour of the button, it's better to focus on the experience as a whole for that particular task. You don't necessarily need a separate danger colour for a delete ...
Michael's user avatar
  • 601
48 votes

Colour palette progression to indicate priority

I would split the 20 priority levels into 4 distinct sets (for the sake of colour coding at least). For example on Microsoft TFS (collaboration tools for software projects) there are 4 severity levels ...
Dave Haigh's user avatar
  • 6,161
37 votes
Accepted

Color coding Alerts

When doubting about how to differentiate graphic elements, a good tool is to test all visual contrasts in design. Shape contrast Size contrast Texture contrast Color contrast If the color contrast ...
Danielillo's user avatar
  • 19.2k
36 votes

What color to choose as "danger" if the main color of my app is red

One absolutely key thing to note here: Do not rely solely on colour to convey meaning. Colours are handy for conveying a visual message, but you need to consider accessibility when making these ...
indextwo's user avatar
  • 461
36 votes

Colorblindness-friendly color scale with a clear progression, without using red/purple/pink

It's not that complicated to create a custom color scheme, you have enough information to do it easily: Five colors Avoid warm colors close to red Colorblind friendly High contrast And a fact that ...
Danielillo's user avatar
  • 19.2k
32 votes
Accepted

Colours that represent beginner, intermediate and expert

The use of distinct colours (e.g. green, orange, red or bronze, silver, gold) can be subject to interpretation, as there are usual meaning associated with specific colours depending on cultural, ...
Michael Lai's user avatar
  • 27.3k
31 votes
Accepted

What is the color associated with lukewarm?

Beige Windows 10 has a color temperature meter for Night light. Using that as a starting point, I extracted the main colors from the gradient, inverted the colors to extrapolate the 'cool' half of ...
SNag's user avatar
  • 10k
28 votes

Colour palette progression to indicate priority

I know that we should answer based on your requirements, but in this case, there is a chance your requirements are wrong. Let me explain. there are 20 priority levels. You can not have 20 ...
Rafael's user avatar
  • 768
28 votes
Accepted

Colorblindness-friendly colors called "green", "blue", "yellow", and "red"

Would patterns work for your use case? You could keep the shape, size, position and orientation the same for each one and have a 'colour blindness mode' where instead of colours to distinguish the ...
GrahamTheDev's user avatar
  • 2,598
27 votes

What is the color associated with lukewarm?

There isn't really a color associated with lukewarm. As the diagram in xiota's answer shows, the color association humans have (red = warm, blue = cold) are even the opposite to what you'd expect from ...
Glorfindel's user avatar
  • 3,320
25 votes
Accepted

What colour should Register and Login buttons be?

The color of the login button should match the primary color of your style theme. Apparently, you're using material design. If your theme, for example, uses blue (#2196F3) as a primary color, your ...
Kristiyan Lukanov's user avatar
25 votes
Accepted

Logical colors for a wireframe

Logical colors would be to show visual hierarchy with a range of one color. Exactly like you did in your wireframe. I can see clearly how text is built (title vs body), what the position and ...
Nick Groeneveld's user avatar
24 votes

What is the color associated with lukewarm?

Violet and Light Green In color perception theory, at the color wheel there's a division that differentiates warm and cold colors. This division is the one set by violet and light green: above this ...
Danielillo's user avatar
  • 19.2k
24 votes
Accepted

When to use white text on top of a color for readability?

This is standardised by W3C's Web Content Accessibility Guidelines (WCAG) and decided based on the contrast ratio between colors, which you can calculate programmatically. In your case, you would want ...
Izquierdo's user avatar
  • 12.7k
23 votes

Is colour alone enough to convey warning?

Color alone is never sufficient to convey information because: Roughly 5% of the world population has some form of color vision deficiency, either dichromacy (only two types of working cone cells), ...
Austin Hemmelgarn's user avatar
20 votes

What is the color associated with lukewarm?

I think yellow makes sense for "lukewarm" if red represents "warm" for the reasons called out in Danielillo's answer: "lukewarm" means "moderately warm" and should therefore be represented by a color ...
Thomas DeSilva's user avatar
19 votes
Accepted

Best error color on blue color?

Show your error message on a neutral-colored box. download bmml source – Wireframes created with Balsamiq Mockups
Ken Mohnkern's user avatar
  • 9,034
19 votes
Accepted

Change link color based in background color?

Comparing the saturation and brightness of white to yellow: There is a difference of +25 in saturation and -5 in brightness If blue has S=65 and B=100, the resulting blue would be: S 65 + 25 = 90 B ...
Danielillo's user avatar
  • 19.2k
19 votes

Is colour alone enough to convey warning?

The color alone is not sufficient as a distinguishing feature. The comparison to a traffic light is also not entirely correct. A traffic light has not only the three colors but also a very specific ...
BrunoH's user avatar
  • 3,435
16 votes

Color coding Alerts

It looks like you should just use one shade of red, the box background, and opacity. Here's an example of a few different states using one color of red. Opacity is only used once, on the 42 example, ...
moot's user avatar
  • 5,371
16 votes

Change link color based in background color?

Use Google inspector, they suggest another color that passes AA and AAA AA : #217387 AAA : #185564 What is AA and AAA ? These are compliance levels to make digital content more accessible provided by ...
SylvainBTL's user avatar
15 votes
Accepted

Multi or Single colored rating stars

First i believe you are well prepared to use only star rating system. As there are other ways around to compare products or profile (artists in your case). Side Note: YouTube switched from a star-...
divy3993's user avatar
  • 1,598
15 votes
Accepted

What color should "record" / "stop" buttons be?

Handycam/Camcorder era: Static physical button for record/stop Blinking red/solid red indicator light for recordings Stop is a square icon Record is a circle icon Smartphone era: Dynamic digital ...
It's Dylan's user avatar
  • 1,014
14 votes

Colorblindness-friendly color scale with a clear progression, without using red/purple/pink

I really suggest to go with a pattern, as most maps do. Here's the take of the Swiss federal mapping agency: Taken from their complete signs document: https://www.swisstopo.admin.ch/content/swisstopo-...
Marcel's user avatar
  • 241
13 votes
Accepted

Maximum contrast ratio for good accessibility

More Contrast Generally Better There are no general standards for capping contrast for either day or night displays. Generally, the higher the contrast, the easier the reading in both cases (Parker &...
Michael Zuschlag's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible