Understanding modern themes and their current limitations

This week I picked up on an interesting thread which prompted a lot of commentary within in the Power Platform community about an observation raised by Matthew Devaney MVP regarding the creation of a custom modern theme in canvas Power Apps and not seeing the expected colour applied to the modern control.

When I pick a theme color of solid red RGB(255,0,0) ??Why does my button show a different red shade RGB(199,0,0) ??

To the untrained eye this may not be immediately obvious at first. However, if you use a colour picker tool to determine the actual assigned colour value you will quickly realise that the modern control exhibits a totally different shade of red (RGB 199, 0, 0) as Matthew clearly points out.

In fact, if you do a deeper dive and examine all 16 colours of the generated colour palette you will discover that it doesn't even contain the colour value RGB(255, 0, 0) either?!! ??

This is a fundamental difference between classic and modern controls. With modern controls colour is applied to the control holistically and not as a single colour.

This basically means that the colours are not applied to individual elements in isolation but are considered as part of the overall design, ensuring that they work together harmoniously to create a cohesive visual experience.

Why I can't use the colour red (RGB 255, 0, 0)?

One of the key benefits that modern controls provide from a colour contrast perspective is that they are accessible by default. As a result, you simply cannot select a colour that results in an inaccessible colour combination. This is the most likely explanation why Matthew was unable to use the colour RGB(255, 0, 0).

In the example below the Colour Contrast Analyzer (CCA) tool has been used to assess the accessibility of the foreground colour (RGB 255, 255, 255) and background colour (RGB 255, 0, 0) combination of the user selected colour (left) which has a colour contrast ratio of 4:1.

When we assess the accessibility of the foreground colour (RGB 255, 255, 255) and background colour (RGB 199, 0, 0) combination of the system generated colour (right) it has a colour contrast ratio of 6.1:1 which is more accessible.

According to the Web Content Accessibility Guidelines (WCAG) international standard the minimum (AA) colour contrast ratio should be 4.5:1 for regular text and 3:1 for large text (18pt / 24px). UI components and graphical objects must have at least a colour contrast ratio of 3:1.

Modern controls result in a more accessible and inclusive UX

If you are familiar with the App Checker ?? and use this to check for accessibility issues you will be aware that this doesn't provide accessibility warnings for colour contrast. The main reason for this is that the classic Power Apps themes are accessible by default.

However, when customising the colour properties of classic controls in a canvas app it is the responsibility of the app maker to ensure that the colours used are accessible for users that have low-vision or are colour-blind.

In my experience as a Power Platform Developer and Productivity Coach I have seen many apps created by both Citizen Developers and even some Professional Developers where accessibility has been completely overlooked. This is generally due to a lack of awareness of the subject of accessibility.

Recognising that modern controls are accessible by default means that accessibility is automatically baked into the app. Going forward this should result in the creation of apps that are more accessible. However, until classic controls are deprecated it may be some time before we see Citizen Developers creating fully accessible apps.

Current limitations of modern controls

One of the current limitations of modern controls that has been highlighted by this article is that colour is applied to the control holistically and not as a single colour. For me personally this is the main reason why I feel I cannot consistently use modern controls in my apps as it is difficult to correctly apply company brand colours. Furthermore, compared to classic controls there are still many properties yet to be added to provide the same level of customisation.

Closing comment

It is important to remember that the simple in-app custom theming which was deployed in March 2024 is the first iteration of custom theming. I very much look forward to seeing what the Power Apps team brings us next!!