If you want to test out what you’ve done to see how it looks to a colour blind person, visit:

For general pointers to remember when designing a web page or software, follow these guidelines. Decorations on a page don’t particularly matter, but key items do matter – buttons, links, headings, text, and diagrams.

  1. All information must also be understandable in black and white or greyscale. For example, if you ask users to click on the red button, it is not useful if they can’t tell it apart from any other buttons.
  2. Keep the contrast high. Black text on white is normally best for most people, at standard font sizes, for body text. Headings can be other colours, but the smaller they are, the more important contrast is.  Some eye conditions require light text on a dark background, so don’t over-ride the browser’s ability to change font size and colour.
    Black on red or red on black is particularly bad. Cyan with white or teal with grey are even more unreadable. Have a look at the palettes for other examples.
  3. Give error text a more prominent status to make it more visible to all users, such as starting with an all-caps label, for example: “OOPS!: password must include at least a number, a letter, and be 8 – 10 characters.” This way it is more visible whether in colour or black and white.