Wednesday 22 January 2014

300 seconds // Research into accessibility and colour

After sending our initial design for feedback, we were asked to make a number of changes:

- Firstly the client was worried that, as the brand is primarily web and screen-based, that the colours were not dark enough to meet accessibility colour contrast standards.

-They didn’t like the purple option, so we needed to look for a new swatch colour. 

- They also felt that our solution for including the place in the logo felt very disconnected and not connected to the rest of the logo. 

 Dealing with the first piece of feedback was eye-opening for me, as I had never taken the accessibility of my design choices into consideration. In order to solve this problem and meet the requirements of the brief we had to both research into standards of accessibility on the web. Through my research I quickly learned how important these considerations are and techniques to make your design functional for as wide an audience as possible.

We were asked by the client to make the colour contrast between the logo colour and white background meet WCAG AA accessibility standards. 

In researching this, I found that Web Content Accessibility Guidelines (WCAG) provide guidelines for web designers which act as defacto standards for making the internet accessible.  The thing that suprised me most in this initial research was just how many people are affected when the deisgner has failed to consider usibility and accessibility. From the WCAG site:

"Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general."

By following these guidelines, you are not just making your design accessible to people with visual impairments, it actually makes your web design more functional for everyone. For example, using a phone in the sun creates low-contrast conditions, a problem which can be reduced through implementation of proper colour contrast values. 


Design Studio UsTwo provide a handy extensive PDF called ‘Pixel Perfect Precission’ which was great research for this project, introducing us to methods of design to improve usability for as wide a range of users as possible. This is the single best document I have ever read on graphic design, providing practical advice and knowledge which is extremely helpful to any designer but which I have never seen in a design book. I will be evaluating this PDF in full on my PPP blog. 

Through this stage of research we were able to redesign the logo set with WCAG AA complient colours to meet the client’s expectations.

Colour Contrast:


This was our primary concern for this brief, as the client asked for a minimum level of WCAG AA compliance. Through the Pixel Perfect Precision document, we found an online colour contrast checker which we used to check each of our swatch colours and adjust them until they struck a balance between  finding colours that are high contrast to white and also not too dull. This is something of an art because, as a general rule, the further you move a colour away from white, the duller and more brown it gets. We had to tweak and tweak until we found tones that looked consistant as a set and didn't disrupt the importance of colour to the brand. 


Here was our final colours, which met the minimum standard requirements:







No comments:

Post a Comment