Hello,
Take a look at the following page
http://www.ravelly.com/color.html
I want to display one of those 3 boxes on success, error, or for warning.
For “sucess” I use the color #36750f for border and text, and #9bdd74 for background filling.
Any suggestions what colors I should use for “error” (reddish color) and “warning” (yellowish color)?
Hi DeNasio,
I should go for the well known traffic light colors: green - orange - red, and then in a soft pastel variant for the backgrounds, and in an almost black variant for the text color.
Reason: the contrast between text color and background color has to be enough. Now the contrast ratio in the green cell is 3,5:1, while it should be at least 5:1 (according to the Web Content Accessibility Guidelines), or better 7:1 or more.
For some more enhancement of the contrast you can add a text-shadow: 1px 1px white.
You can check it with the [U]Color Contrast Analyser[/U]
Thank you very much. I’ve decided to use the colors you recommended. The only one that I changed a little is the yellow color of the “warning”. Click on the my link to see the color I’ve chosen.
Yes, coloring will be always a question of flavor, also depending of the rest of the site. The contrast ratio yellow foreground/background is 8,9:1 (and between 8,5:1 and 9,4:1 for different types of color blindness), so you don’t hear me complaining. 