0

Does Material guidelines say anything about text color in warning modals?

I was told by my project manager to put the text inside a warning modal in red, but I think it looks ugly. I tried to find something about it on the Material guideline, but couldn't find anything. What color is it recommended to put as font color inside a warning modal and how do I tell the user this is particularly important without changing the font color?

https://material.io/design/color/text-legibility.html

It doesn't say that it's wrong, and so I am not sure if it's ok and what might be better.

2
  • It depends on the space occupied by the text and the design of the modal, any mockup?
    – Danielillo
    Commented Aug 25, 2022 at 14:01
  • Is it a modal or a warning dialog? In the first case, you can include whatever you want, there are no guidelines relating to color in modals other than the generic ones. If it's a warning alert, you can use red. Either way, remember Material is just a set of guidelines, it's not like you have to follow them to the A
    – Devin
    Commented Aug 25, 2022 at 14:13

1 Answer 1

0

Colored background, black text is what is commonly used across multiple design systems for warning dialogs, and thus would be understandable by users. Depending on severity, yellow, orange, or pink/red are the background colors commonly used.

Warning dialogs example 1

Warning dialogs example 2

The problem with using red text for all warnings is that it's used for error states. That's a different case from a warning, which might not always be caused by a user error.

Error message example in red

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.