If you want to test out what you’ve done to see how it looks to a colour blind person, visit:
- To test an image, visit Colbis – Color Blindness Simulator
- To test a web page, visit Toptal – Colorblind Web Page Filter
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.
- 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.
- 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.
- 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.