I'm considering changing my label ('The username or password incorrect.). This is the current design:
Any good design for this label?
I want the new label to get more attention than it used to be right now.
In your current version the contrast between the color you use for your error message and the background color is low.
Try either a brighter error color or a lighter background color. Here are some examples;
Check out this tool to measure color contrast.
First of all, I'd suggest you use labels for the fields, it's of paramount importance. Based on your screen capture, I assume you're using inline labels. Read reasons why NOT to do it at
Other than that, color is not an issue in error messages. Red is used often for familiarity for western users, and it comes because red is a very visible color. So if it has a low contrast, it loses its purpose. So NGFAD's answer is very sound and you should pay attention to it.
If you still think you want that red, you could simply use it as background for the error message, then use white for the text. This way you'll keep the color and still have good contrast.
Also, be aware of font sizes. Some people may not see it at such font size, specially with such low contrast. Try either increasing the font size or the font weight.
Finally, you can do what StackOverflow does: instead of using an error message below the field, it uses an alert OVER the field, see capture below:
EDIT: Forgot to mention: while we are at "red is not needed for error messages", you can see in this image the red Google button which obviously isn't an error message. Bottom line is: color doesn't matter, the important thing is to make the message visible and understandable
The message should be a complete grammatical sentence, for example:
That username or password is incorrect.
The, because it is clearer that the word
That refers to the username or password which the user typed. (What does "The username or password is incorrect." mean? It might give the user the idea that their registration details are somehow incorrect, whereas the message should indicate that what the user typed is incorrect.)
The messaging in your example is typical for a field validation error, "Not a valid email address". That style is appropriate at that level, though you do have a contrast problem as pointed out in another answer.
A failed sign-in is a critical error and should be communicated more forcefully than a simple field validation error. Follow the user's focus in the form and consider how and where critical errors are usually communicated and make sure there is no chance of missing or misunderstanding the information.
In this example the system is communicating an authentication error.
It's also important to provide suggested next actions, not just a negative error statement.
The field entries are technically valid so there is no field-level error.
I think, the color red is essential for error message... We as a users are used to it by seeing the red color in text is a error message. But try different shades of red. What you have used is not visible enough. You can make the text bolder.
I agree with some point in the above. You need to give labels to the input boxes. Using placeholders as a label is not right way of doing.
Generally user will find the clues in the design. We want to give the right clues at the right places.
Set the background color of the wrong input to a brighter red than the red of the border color. (Or the other way around) Then, if its the password, delete the previous input and set the background text to something like: The password is incorrect. The text can be white or the color in the background behind the text edit. Note: Works better with thicker fonts because it looks like its cut out. Maybe add a small fade to it for some extra effects.