Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
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 '12 at 13:35
    
any background color, the project is a mobile native application for iOS and Android –  Itai Sagi Aug 22 '12 at 14:21
add comment

2 Answers

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.

share|improve this answer
add comment

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)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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