I have the color:
#4285f4 and I'm looking for a easy to read error color code. I'm using Google's default error color:
#dd2c00. However this doesn't read very well on the page...
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
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.
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:
I tend to mix whatever the default colour is with red until the colour feels warm, but the text is still readable. You can mix with orange or yellow for warnings, mix with blue (or white) for neutral and mix with green for positive messages.
This works because people associate a wider range of colours with certain levels of severity.
An alternative would be to change the background instead of the text colour, to make the message stand out. Again, mix the background colour with red, orange/yellow, blue/white or green depending on what message you want to convey.
If none of the standard hues work, go for any alternative colour, but use an icon or a descriptive text such as "Error", to make it stand out and convey the meaning of the text in that way. Using an icon is probably something you want to do regardless, because they are more recognisable than colours, especially if anyone using your application is colourblind/colour deficient.
Errors are not only conveyed by color
Errors can be displayed in a combination of ways to show that they are an error:
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.
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.
So, try to set your error color a bit transparent. Experiment with lighter or darker red variations.
Example with Google's default error color:
rgba(221, 44, 0, 0.87)
Play around with the background when it comes to colors that do not compliment each other.
- You can remove the Placeholder text while showing the error as the error clearly states what the user needs to do.
- Reduce the opacity of the ACCEPT button to represent the importance of the error message. (Which, in this case, is very high as not adding a title wouldn't let the user save the note.)
NOTE : Maybe SAVE would be a better text for the okay-state button. Just a thought but I could be wrong as I am not completely aware of the context.