Design patterns and examples for colour blindness
In my experience it can be hard to make people understand that colour blindness can actually cause real problems for real people on the web. Sometimes when I point out that the colour combinations used in a design can make it hard or even impossible for some people to use a website properly, the response I get is “Well it looks fine to me and the other people I have asked, so I don’t think there is a problem.”
Of course there isn’t a problem for you – you aren’t colour blind… (For the record, neither am I.)
The problem is twofold:
- Explaining and showing examples of the difficulties that people with various colour vision deficiencies can run into
- Helping designers avoid those problems
One website that attempts to do this is We are Colorblind. On the site you can find design patterns, good and bad examples, quick tips, and links to various tools. I think the examples section is very good since the accompanying text explains why each example is good or bad.
If you think something is missing from the site, go ahead and Suggest a pattern or example.
- Previous post: Lightboxes and keyboard accessibility
- Next post: Use the th element to specify row and column headers in data tables
Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.
Subscribe / follow
Sponsors
Authentic Jobs
- Data Architect / Lead Developer
- Creative Web Designer at ADP / Autotegrity (Cambridge, MA, Ma, US)
- Web Developer at Caddis (Chicago, IL, Il, US)
- Full-Stack Developer at Svensk Lånemarknad (Stockholm, Sweden, SE)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost

