Accessibility is becoming a bigger issue in all aspects of design (and rightly so) but when building BI content using third party tools sometimes you are limited to what you can and cannot do.
When I used to build BI content full time I would say probably 40% of my time was spent on formatting and I lost track of how many hours I spent perfecting my colour palettes. This was until I discovered how to change them on the fly using Chrome Dev tools, F12 has been my best friend ever since.
Speaking of Chrome and it’s helpfulness and getting back on track I discovered a really cool Chrome plug in called Colorblinding, I mean with the exception of spelling colour wrong it’s fantastic and here is why.
Colour blindness is something we all need to think about and when building BI content, especially when building it for mass consumption either internally to your organisation or publicly facing.
Below are some of the types and prevalence of colour blindness.
Source: https://www.color-blindness.com/types-of-color-blindness/
Now to put this in perspective I have used NHS Digitals COVID-19 in you area dashboard for multiple reasons: –
- It’s publicly facing
- it has has colour that has context
- it uses shading
- it tells me how many of my neighbours have COVID-19
- it’s awesome.
Link here: https://digital.nhs.uk/dashboards/coronavirus-in-your-area
Below is the default view, this is my view as I am not colour blind.
Now when choosing a colour palette we have to be mindful of ensuring the content works for everyone and not those without visual impairments and colour blindness is just one consideration but this plugin makes things very real very quick.
Default View
Once you have your content in your browser you simply launch the plug in and select the type of colour-blind lens you wish to look at your dashboard through and voala.
So below is the same dashboard but through all the different type of lens.
Red-Blind / Protanopia
Green-Blind / Deuteranopia
Blue-Blind / Tritanopia
Red-Weak / Protanomaly
Green-Weak / Deuteranomaly
Blue-Weak / Tritanomaly
Blue Cone Monochromacy / Achromatomaly
Monochromacy / Achromatopsia
This is the rarest and probably fair to say the most difficult to design for as it essentially means 1 colour. In all the other versions the differentiation between Cases and Telephone Triages is crystal clear however here it is not. The dashboard design itself enables these users to still get the information they need and the use of shading on the maps rather than lets say a Red-Amber-Green palette still allows these users to differentiate low-high areas within the map which is a triumph.
To highlight how a RAG palette would have been a bad choice, below is Red-Amber-Green through a Monochromacy / Achromatopsia lens.
Like I said this isn’t a full testing plan and you should be doing more than a quick peek through a Chrome plugin to ensure your content is accessible but it is super helpful and makes life for developers just that little bit easier.
What are you doing in the accessibility space?
thatbidataguy 