Check your colour contrast
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
You’ve come up with a nice colour scheme for your new website but does it have enough contrast? Does it satisfy W3C guidelines for color contrast?
W3C: Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Checking colour contrast is important for accessibility reasons but it’s also important for users with older screens and some LCD screens which may have poorer color contrast capability.
The Colour Contrast Check Tool is a useful tool from Snook.ca that allows you to check that your colours achieve sufficient contrast. The tool measures colour contrast against the W3C specification and tells you if your colours exceed the thresholds for colour and brightness difference.
The W3C guidelines require a brightness difference of more than 500 and a colour difference of more than 125. It’s also important to say that the guidelines are just that, guidelines. Use with discretion.
The maximum contrast is obtained between black (#000000) and white (#FFFFFF) where colour difference = 255 and brightness difference = 765.
This website uses #E7F3CF as a highlight background colour (see above paragraph) with #333333 as foreground. The combination has a color difference = 184 and a brightness = 528. This passes the test.
However, another website (that we know, ahem) uses #C8C08C (example text) as foreground colour with white as background. The combination colour difference is 66 and brightness difference is 233. The contrast is not enough and we will probably need to revisit the website colours in this case.
Speaking as someoene who has used pastel colours (aka “too wishy-washy”) on a few websites, I think I might find some use for this.
Comments are OFF for this post.