Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

ray_ux

Colour Palette Dropdown Selection to switch between themes.

How to pass WCAG design guidelines in all reports and dashboards. Integrating a selection of different themes from a dropdown. This is done by adding page names to the data source and changing colours.  We can also replicate this by using bookmarks, but I feel this method takes too long to configure and I’d rather add additional pages as it's quicker and more manageable. 

 

For those unfamiliar with Web Content Accessibility Guidelines (WCAG) 2.1 https://www.w3.org/TR/WCAG21/

 

I’ve created a simple dropdown below. (The stats table isn't align well and the data not fully pull through, only wanted to show a quick demo for this article.).

theme new.gif

 

I highly encourage any BI developers to integrate something like this as it just makes things a lot more accessible for users. Accessibility is important because 1 in 10 men are colour blind and have difficulty distinguishing between red, green, and amber. There are a lot of design thinking, psychology, and theories behind the UX – I suggest reading beauty of data viz book by David McCandless for those want to specialise in data viz. I have also talked about integrating UI tools such as Figma into Power BI for better UX which is on my personal blogs: https://medium.com/p/2806191b253f


Below is an example from a colour blindness perspective. Never just rely on colour only, as shape/letter is important as well!

 

Untitled-4.jpg

 

There are many ways to create page navigation on a dropdown/list. The easiest way is to overlay a transparent object and add an action setting to direct to a specific page (this works well for lists). Another method is to use conditional navigation – there is a nice tutorial by the guy in a cube on here: https://www.youtube.com/watch?v=-kaUnBXvvGo

 

Anyway, I have combined both methods to create the colour Palette Dropdown and use Dax to enable transparent shapes to appear after clicking on the dropdown. By doing this we can skip the additional step to confirm the dropdown selection. Make sure to sync all pages together so all the filters will stay the same when users toggle different themes.


Limitation: I don’t think it would affect the performance too much unless you are planning to have more than 5 themes within a report.

Comments

Hi @ray_ux , May I know how you navigate to other page just by clicking the dropdown value without using button?

 @Aburar_123  dax