Introduction
So here we are at C in the A to Z of Accessibility – Power Platform Edition. In this first “C” post I want to look at the use of Colours, colours everywhere!
This applies to all areas of the Power Platform, yup even Dataverse. It also applies to anywhere that colour is used, so definitely one to pay attention to!
Colours and Accessibility
Golden Arches, The Blue Badge or Big Blue, Team Orange, and more. Colours often become a key part of defining an identity. Done right they can make their way into industry, and even global, culture. Colours can be a massive part in creating successful branding and content etc. However, if they are not applied carefully then they can end up isolating people with accessibility needs.
Designing an accessible colour palette to use doesn’t have to be overly complex, aesthetic preferences and decisions aside. It’s just being aware of how colour combinations work together and applying a bit of consideration in the design process.
WCAG and Ratios
To help with this the Web Content Accessibility Guidelines (WCAG) 2.1 define a set of contrast ratios that indicate how well colours work together based on their visibility against each other. Following their lead, this standard has been adopted across digital media and app development from Word docs and PowerPoint presentations to Power Apps and Power Pages etc.
The colour contrast ratio calculation is based on the relevant luminosity of 2 colours. This can sometimes not feel quite right, and the temptation is to say, “well it looks good to me”. At the end of the day, if you want your content to pass accessibility standards then you need to make sure that colours are considered. This might sound a little blunt, but there is no excuse or reason for creating inaccessible content. In doing so it excludes a vast number of people and I know that’s not your intent, right?
There are numerous websites out there that allow you to check the WCAG contrast ratios. I also have to mention my personal Dataverse driven Power Apps theming engine and builder (new version Coming Soon!).
Here are a few links for you:
- WCAG specification – WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C
- WebAIM Contrast Checker – WebAIM: Contrast Checker
- Contrast Checker – WCAG – Contrast Checker
- Power Apps Theming Engine 2.0 – COMING SOON!
Where does Dataverse fit into this?
I know, I said this even applied to Dataverse… and it does! There’s always been a strange, half-done job of adding colours to tables/entities etc in the past. At long last though we seem to be getting some real progress.
For example, you can now add colours to optionsets (sorry – Choices) that can be used in the new Power Apps controls. That means that list views of records can now include colour to indicate status, or type etc. It also means that we need to ensure that those colours don’t become the ONLY method for identification. we also need to ensure that the colours we use work for those with colour vision deficiency and do not ex clude people!.
A quick note about Size
WCAG provides a few pass/fail options covering Normal text, Large text, and Graphical/User Interface components. It also then proves an AA and a AAA rating to say if you’ve passed or failed according to those. AA is the minimum standard that should be achieved. AAA is the holy grail and if you achieve that then you are a hero!
The Normal and Large text options can be a bit controversial though as we consume content in so many ways. Large text on a phone can be smaller than Normal text on a monitor. Thinking about how the content will be viewed/used is a critical part of this. My personal recommendation is to ensure all colour combinations pass as the Normal text size so that you cover all scenarios. This does mean applying a stricter contrast ratio but will mean that what you design can be used across multiple devices and screen sizes.
One final thing
I hope you have found my Borders without Boundaries post helpful. This is part of my series “A to Z of Accessibility – Power Platform edition”. Click here to go to the introduction article where I will be posting a Table of Contents, or simply check out the Accessibility section of the website from the top menu or by going directly to the category page here.
Content in this series is © Mike Hartley. I am happy for folks to quote or reuse snippets (with attribution) but this has taken a lot of work to compile so please do not copy whole sections. If there are any corrections or suggestions then please use my social links to contact me. I am always happy to add additional content and remarks with full credit given. Likewise these pages will evolve as my learning and understanding grows, so make sure to keep this bookmarked