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:

Navigation bar

2 Answers 2


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.

  • Awesome! Yeah, I had another person suggest this offline. Very good thought! That's our current plan - when people select their background color, show them what each theme looks like on that color and let them pick. Thank you for the link to an example! That will be really useful for ideas. Oct 23, 2018 at 12:50

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

  • Whoa. I wondered if it was possible to check the color of something and adjust on the fly. The future is here! Oct 23, 2018 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.