Web industry urged to embrace colour accessibility
By Craig Grannell on May 29, 2013
Websites too often exclude people who cannot see a full colour range
Awareness of accessibility is again growing in the web industry. We’ve recently reported on Nomensa’s accessibility declaration tool, GAAD 2013, and Web Axe urging designers to keep link underlines.
However, accessibility extends into often overlooked areas. Designer and illustrator Geri Coady has long said colour is one such example. She explores the topic in her new Five Simple Steps book, A Pocket Guide to Colour Accessibility.
Coady (GC) spoke to .net about why colour accessibility is important, how integrating it into your workflow won’t force you to sacrifice creative freedom, and why she felt compelled to write a book on the subject.
.net: Why is colour accessibility important and why do you think more designers aren’t thinking about it?
GC: I don’t think most people realise how common conditions like colour-blindness really are. Close to five percent of the population have some degree of reduced colour vision, and that’s not counting the even larger percentage of people who have poor vision in general. Design trends these days are all about subtle details and many websites feature text or other page elements that have insufficient contrast or inappropriate colour combinations. Designers are designing for what they can see, not realising that it may be incredibly difficult to read for others.
It’s understandable how such topics can be forgotten, though. There are an overwhelming number of things for designers to think about. New technologies are popping up daily and our list of tools to learn is always growing. Many of us who are comfortable in our design workflow are spending more time learning new coding techniques or worrying about how to use Git. We need to step back and think more about colour choices and make sure such consideration doesn’t get lost amongst our tools.
.net: What would you say to a designer concerned about sacrificing creative freedom when following colour accessibility guidelines?
GC: It’s a common misconception that ‘accessibility’ equals ‘boring’. It reminds me of the same misconception about responsive design; some people say it restricts designs into visible grids and everything ends up looking the same. Taking that attitude is a way to blame the tools or requirements when we are the ones in control of the final outcome. Plus, guidelines for making a design colourblind-friendly are completely reasonable. There’s simply no excuse. Striving to make our work more creative is important, but we also need to think about real-world considerations and understand that not everyone is blessed with perfect vision. We need to be inclusive and provide an enjoyable experience for as many people as we can.
This simple graph highlights colour accessibility concerns. The graph becomes complex for someone to figure out if they cannot differentiate red and green (right)
.net: What's a good first step in ensuring a site is colour accessible? Are there any quick fixes someone can make while they investigate further?
GC: Learning about colour blindness and being aware of what can cause problems for people with colour blindness can help prevent any design no-nos from appearing in your project in the first place. For existing sites, you can easily check for problems with a colourblind simulator like Color Oracle, but it should never be an afterthought.
Quick fixes depend on your design and the areas that may be cause for concern. It may be as simple as adding underlines to default link states in your stylesheet, but, really, it depends on your site’s content. Infographics and charts are another thing to watch out for.
.net: Why did you decide to write a book on this subject? What will someone learn if they download a copy?
GC: As an illustrator, I love colour, and as a web designer, I care about accessibility. Studying the two of them together was an obvious choice for me. Last year, I gave presentations at conferences about a variety of colour topics and I included some basic tips about colour accessibility, which piqued my own interest even further. I wanted to research the topic more and share it with the design community. When the Pocket Guide series from Five Simple Steps was announced, I knew it was the perfect fit.
For the price of a cup of coffee, you’ll learn everything you need to know to make your work more colour-accessible: the science behind colour blindness, strategies and tools for choosing palettes, what to do and what to avoid, how to proof your work and meet contrast compliance, and how to increase usability in existing designs. The book is useful not only to web designers, but also for anyone who designs for digital media, including app designers, infographic designers and game designers.
Websites too often exclude people who cannot see a full colour range
Awareness of accessibility is again growing in the web industry. We’ve recently reported on Nomensa’s accessibility declaration tool, GAAD 2013, and Web Axe urging designers to keep link underlines.
However, accessibility extends into often overlooked areas. Designer and illustrator Geri Coady has long said colour is one such example. She explores the topic in her new Five Simple Steps book, A Pocket Guide to Colour Accessibility.
Coady (GC) spoke to .net about why colour accessibility is important, how integrating it into your workflow won’t force you to sacrifice creative freedom, and why she felt compelled to write a book on the subject.
.net: Why is colour accessibility important and why do you think more designers aren’t thinking about it?
GC: I don’t think most people realise how common conditions like colour-blindness really are. Close to five percent of the population have some degree of reduced colour vision, and that’s not counting the even larger percentage of people who have poor vision in general. Design trends these days are all about subtle details and many websites feature text or other page elements that have insufficient contrast or inappropriate colour combinations. Designers are designing for what they can see, not realising that it may be incredibly difficult to read for others.
It’s understandable how such topics can be forgotten, though. There are an overwhelming number of things for designers to think about. New technologies are popping up daily and our list of tools to learn is always growing. Many of us who are comfortable in our design workflow are spending more time learning new coding techniques or worrying about how to use Git. We need to step back and think more about colour choices and make sure such consideration doesn’t get lost amongst our tools.
.net: What would you say to a designer concerned about sacrificing creative freedom when following colour accessibility guidelines?
GC: It’s a common misconception that ‘accessibility’ equals ‘boring’. It reminds me of the same misconception about responsive design; some people say it restricts designs into visible grids and everything ends up looking the same. Taking that attitude is a way to blame the tools or requirements when we are the ones in control of the final outcome. Plus, guidelines for making a design colourblind-friendly are completely reasonable. There’s simply no excuse. Striving to make our work more creative is important, but we also need to think about real-world considerations and understand that not everyone is blessed with perfect vision. We need to be inclusive and provide an enjoyable experience for as many people as we can.
This simple graph highlights colour accessibility concerns. The graph becomes complex for someone to figure out if they cannot differentiate red and green (right)
.net: What's a good first step in ensuring a site is colour accessible? Are there any quick fixes someone can make while they investigate further?
GC: Learning about colour blindness and being aware of what can cause problems for people with colour blindness can help prevent any design no-nos from appearing in your project in the first place. For existing sites, you can easily check for problems with a colourblind simulator like Color Oracle, but it should never be an afterthought.
Quick fixes depend on your design and the areas that may be cause for concern. It may be as simple as adding underlines to default link states in your stylesheet, but, really, it depends on your site’s content. Infographics and charts are another thing to watch out for.
.net: Why did you decide to write a book on this subject? What will someone learn if they download a copy?
GC: As an illustrator, I love colour, and as a web designer, I care about accessibility. Studying the two of them together was an obvious choice for me. Last year, I gave presentations at conferences about a variety of colour topics and I included some basic tips about colour accessibility, which piqued my own interest even further. I wanted to research the topic more and share it with the design community. When the Pocket Guide series from Five Simple Steps was announced, I knew it was the perfect fit.
For the price of a cup of coffee, you’ll learn everything you need to know to make your work more colour-accessible: the science behind colour blindness, strategies and tools for choosing palettes, what to do and what to avoid, how to proof your work and meet contrast compliance, and how to increase usability in existing designs. The book is useful not only to web designers, but also for anyone who designs for digital media, including app designers, infographic designers and game designers.
0 comments: