Variable App Colors (for Branding) and Accessibility

Question

A feature that was sold to clients long before I joined was enabling use of custom primary and secondary colors in our mobile app. This allows their branding to be communicated to users for a more white-label experience. However, a few things happen as a result of this feature:

• Not always great for accessibility. Some customers are adamant on sticking with their brand colors even if it doesn't pass contrast ratios.
• I use more neutral colors for functional design elements such as forms, copy, containers, etc.
• But our buttons are still currently in variable primary colors. Which means if a customer has grey as their primary color, a button essentially looks disabled (no good). Or if their brand colors are red or green, it can also be problematic when asking to confirm an action or perform anything destructive.

My question is, does anyone know examples of other products that handle a similar issue? Where custom colors are allowed, but without significant impacts to accessibility and general functionality? Trying to figure out where best to inject these colors/branding so clients can be happy and users won't be confused.

Thank you!

Answer 1

I don't know any app that allows massive color change beyond what we all know as normal: light mode & dark mode.

I think offering a client the possible arbitrary color change according to their preferences has several disadvantages, of which only a couple come to mind at first glance.

1. Allow an application to accept an arbitrary change of colors, if this has no limit, there are 16 million possibilities, each one of the coordinates a screen color palette has. This makes it impossible to have control over the future contrasts produced, forcing the company to make personalized adjustments for each client.
2. At the design level, offering the possibility of choosing colors arbitrarily is underestimating the power of one of the key compositional elements in graphic design: color. It's exactly the same as offering the client the possibility of placing their institutional typography throughout the application, screens, menus, buttons, etc. Not impossible but unlikely to work. Changing the color of an entire app is not the same as – Insert your logo here –.

---

Now, if this is actually one of the features of the application and the company prefers to keep it, I would propose some adjustments:

• Offer a limited color palette, so these colors have already been tested beforehand, and give to the customer the possibility of choosing within this palette the colors that "best fit" their preferences.

• Place the key elements of the use of the application in frames, so that the customizable part is outside these elements.

• Reduce the area of ​​affectation of the personalization, maintaining a neutral color in the entire application, with customizable details.

From all the options, in my opinion, the most notable is unfailingly reducing the customizable color palette. I think a thirty colors palette can easily be tested with satisfactory results. If the client doesn't find a color that matches their own in a palette of thirty, it may not be a color, but a color combination that they should choose.

Answer 2

I unfortunately don’t have examples either. I believe the key is to balance the one user’s want to enforce their branding with the need of the many users to identify buttons.

A good orientation might be WAI’s Authoring Tool Accessibility Guidelines

These are criteria to be applied to applications that allow producing web content, which your customisation tool does, even if limited to colours. The interesting part is Part B: Support the production of accessible content

As you will see in the standard, it’s not the authoring tool’s responsibility to forbid inaccessible content, but to identify and explain problems and suggest solutions.

To take a UX perspective (to be verified in research, of course): The user configuring the theme is usually not the one who cares most about the company’s branding. Neither do they have the authority or the knowledge to change colours. They are often told to take the style guide and pick some colours for the theme.

You would have most success probably with an educational approach:

• Provide a live-preview of the theme for the user to realise problems right away by themselves
• Provide warnings or error messages based on contrast checks
• Add help articles that go into details about the issues
• Make it easy to accept a suggested colour that offers enough contrast, a similar one or a neutral one

The help articles might go further and explain what brand experience is and that colouring everything extensively while producing usability issues will actually reinforce the association between frustration and the brand’s color. (;