Цвет ошибки hex

asked Apr 21, 2017 at 16:51

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 doesn’t have everything for every scenario. Don’t be afraid to part with them.

Working off of your blue background, I quickly landed on an «alerting» color that stands out without painful contrast. Changing the alert text to bold will help it read too. And, as mentioned elsewhere, well-known icons are a good way to draw the user’s eye as well.

You’ll notice a few other suggestions in there as well. Just food for thought.

• Differentiate the Accept action over Cancel. The user presumably initiated this form so acceptance is the more likely intent.
• Consider more natural labels for your field to encourage entry.
• Increase the size of the error text. That will help with read too.
• I only changed the color of the field underline. This is usually sufficient to highlight the problem and helps to emphasize the error text.

answered Apr 21, 2017 at 17:51

Light yellow would have better contrast on the blue background. Though I’ve also seen some UIs use a lighter fuchsia/pink to contrast with darker blues. I found two swatches in the Material design color guidelines that may work:

Yellow: #FFFF00
Pink: #FF80AB

answered Apr 21, 2017 at 17:19

Sumurai8Sumurai8

1821 silver badge9 bronze badges

Errors are not only conveyed by color

Errors can be displayed in a combination of ways to show that they are an error:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This is only two of multiple variations. Also keep in mind that the animation of a message popping up after an action has been taken will also create an affordance of what type of message it is.

My recommendation is sticking to adding an icon prefixed to your message.

If that doesn’t do the trick, then maybe you need to reconsider the usage of a blue background.

answered Apr 21, 2017 at 17:01

The trick is to use alpha color instead of a solid color.

Google describes this in their Material Design specs under the bullet point «Legibility».

From the specs:

The text «The woodman set to work at once» has the same color in both pictures. In the first one, it is solid.

In this picture, black is used as initial color. The opacity has been decreased, to let the background-color shine through, providing a better contrast.

Source of images

So, try to set your error color a bit transparent. Experiment with lighter or darker red variations.

Image source

Example with Google’s default error color:

rgba(221, 44, 0, 0.87)

answered Apr 22, 2017 at 17:41

Shreyas TripathyShreyas Tripathy

6,7676 gold badges27 silver badges44 bronze badges