Author: Laura Ridings, eLearning Developer, Centre for Collaborative Learning In my previous life as a secondary school teacher, there were certain rules that I had in my classroom for anyone designing for print or screen 1. No comic sans font 2. No fluffy bunnies or cartoon flowers 3. Nothing unnecessary such as Thank you slides if designing a presentation. 4. Align EVERYTHING correctly 5. No neon or clashing colours. These were my rules and they worked… mostly. And for lower school, yes, these rules came with the obligatory message, you break them a rabbit dies somewhere in the world. Don’t hate the method, it worked! I’m going to have a look at rule number 5, colour. Colour is vitally important in our world, from birth we are taught the meanings behind certain colours in certain contexts eg: red means stop, red is love, red is danger. I’ll save the rudimentary dive into semiotics, sorry Roland Barthes! Whenever I start a project, one of the first questions I like to ask before starting the planning is to ask if there are any colours and branding we need to take into consideration. These are super important to develop something that fits the brand and provides unity with everything people see. Designing for education comes with its own set of rules and accessibility is at the forefront of developing resources for inclusivity. A great tool to help with this comes from our friends over at Adobe. I’ve used their online colour wheel app for many years, often as a source of inspiration and exploration of current trends, but it has always been my go-to for creating colour palettes. It can convert themes into RGB, LAB, CMYK, HSV, and Pantone colours without losing brightness or colour accuracy. You can also download or copy themes in formats that are easy to place in UX designs and prototypes, like CSS, XML, and LESS.

Not so long-ago Adobe released a really great feature to their app, Accessibility Tools which allows you to create a colour palette that is both Colour Blind Safe and Contrast checked. The tool will allow you to fix colours and show you how they will be perceived to someone with colour blindness or impairment meeting the WCAG criteria (Web Content Accessibility Guidelines).

Once you have created a colour palette you just need to click into the Accessibility Tools. From there you will be shown advice on a possible colour conflict. The app shows in the simulator how these colours will display for people with various types of colour blindness, Deuteranopia, Protanopia and Tritanopia. By moving the stoppers within the colour wheel, you can find a palette that provides no conflict and can be classified as colour blind safe. The other feature looks at contrast and provides you with the display of text colour against the background colour. By changing these colours, you can see what works and doesn’t work with a simple Pass or Fail within the app. The higher the contrast ratio the better for contrast legibility.

If you want to find out more then I recommend having a play with the app, which is free. I am a stickler for good design and people I work with will attest to my lack of filter if I see something I dislike. If you want to talk about colour and how you can create for accessibility, then do not hesitate to talk to your friendly neighbourhood e-learning developers.  Adobe Color: https://color.adobe.com/create