Bootstrap nav bar with variable background color - best way to handle this?

Question

I'm working on the UX for an application with a bootstrap top navigation bar whose background color will not be consistent because resellers can change it to match their branding. At the moment, the best I can think of to do is to add a very slight, mostly transparent, grey color to the buttons, with white text.

This seems to handle most of the color choices I can think of, except that with a flat black background the slight grey color vanishes, and with a flat white background the white text is a bit hard to read.

Does anyone have other ideas? I can't share the actual example, but have included a similar idea below:

Answer 1

I would suggest providing your resellers with a choice of color themes for the nav bar elements. At least having two themes - light and dark, would provide flexibility.

I imagine it like, for example, IBM did it with their Carbon Design System aimed at IBM Cloud products developers: they have two basic color themes - Default and Dark (other themes appeared later and didn't differ much). See how text and buttons colors toggle between light and dark schemes. And that's how they implement it in their own words: Introduction to theming.

Answer 2

One option would be to check the perceptual brightness of the background color and toggle between a light or dark text color.

How you exactly go about doing that in your application depends on your current stack, but the idea would be the same. The example I've included below uses LESS to calculate the perceptual brightness (luma function) and sets the foreground to either light or dark color.

Example using Less color channel function