2

I have a requirment to have users be able to select button colors, I want that according to the background color they select, an appropriate, contrasted button text color will be determined automatically.

for that - I need some sort of formula, and I was wondering if anyone knows what such formula might be, I looked around, but haven't found anything substantial.

Here is an example of a visible text on button that I want to achieve:

Example contrast

2
  • Is the user able to select any background color, or just pick some presets that you have defined? Also, is your project for an iOS app, a web page, or something else?
    – Brendan
    Aug 22, 2012 at 13:35
  • any background color, the project is a mobile native application for iOS and Android
    – Itai Sagi
    Aug 22, 2012 at 14:21

2 Answers 2

1

My understanding based on your explanation is that a user can choose a colour as the background. To this, a button and button text colour will be selected automatically.

From what I can see from your provided example, you already have a clear formula.

The user has chosen red as the background colour - then the button background is a lighter variant, with the button text being a darker variant.

If I were to select blue, following this formula, there'd be a lighter blue for the button background and a darker blue for the button text.

I'm not sure what software you'd be producing this in, but the button gradient (inner glow) effect could be created with a graded black colour, multiplied on top of the core colour, so the effect will always remain.

(reading the comments on your question...) You'd be better off getting some mid-range presets instead of leaving it totally open to the user. I'm not saying restrict the colour choice, but restrict the colour lightness, i.e. only able to choose a particular shade of red/blue/green etc instead of all shades.

1

It looks like your BG color is about #aa0000 and your buttons are about #ff5555. Depending on your desired look you could do something like add #55 to each RGB value (anything past #ff would just stay at #ff). Maybe you could make it more complex and subtract the BG value from #ffffff and add back a third of the difference to each RGB value.

Another thing you could do is make the buttons translucent and just let the opacity govern the color (I did something like this for school: Fish Color Project)

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.