Can you read this Error-Message?

I have a pink/plum background on my web page that I’d like to keep, but am afraid there isn’t enough contrast with my red error-messages…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<style>
		div#myBox{
			width: 250px;
			margin: 50px auto;
			padding: 10px;
			background-color: #ffdbdb;
			color: #F00;
		}
	</style>
</head>

<body>
	<div id="myBox">Can you read this Error-Message?</div>
</body>
</html>

Thoughts?

Debbie

I can, but…

http://webaim.org/resources/contrastchecker/

Those colors fail contrast checks, as you’ll see here: http://webaim.org/resources/contrastchecker/

If you darken the text a bit (click the “darken”) button, you quickly get a text color that passes muster and looks pretty good to me. E.g. #830000

EDIT: haha, ninja’d!

Okay, but all of the other error messages on my website are #F00

So what would you recommend?

(I could go with a different background color like “Buff”, but I really like #FFDBDB in this instance…)

Sincerely,

Debbie

I made a recommendation. :slight_smile:

If you want the background color, just make the text darker. All the other error messages don’t have a special bg color, presumably, so this one is different anyway.

In addition to Ralph’s advice, I’d recommend downloading the Colour Contrast Analyser. It not only allows you to test contrast for people with normal vision, but tests against various types of colour blindness, too. I don’t want to spend time building a site if folk can’t read it when it’s finished, so I find this tool invaluable. (Fortunately, the Windows version runs on Linux under Wine. :))

[ot]

It’s a pity it doesn’t work when you’re sober. :-/[/ot]

[ot]

:rolleyes: (Does Discourse have a “groan” emoticon?)

:lol:[/ot]

So I won’t be banished to Hell if I have one error-message which is a darker shade of red from the rest of my website?! :-/

Debbie

Well, depending on the judge, you might see a bit of Cat-o’-Nine-Tails action in Designer’s Purgatory, but that’s preferable to the horrors of eternal damnation in Accessibility Hell. :slight_smile:

Ha ha!!

Well, I just tried “buff” and it looks like puke in this case, so I’m sticking with some shade of pink/plum.

I’ll take my chances in Purgatory… :wink:

Thanks!

Debbie