User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Are there any rules of thumb or formulas for the different color shades when creating non-default buttons?
Default buttons have 4 states, Enabled, Focused, Pressed, and Disabled. These all tend to have built in default effects that are some shade of grey that are recognized by the user to mean their respective states(Like light grey tends to signify an unpressable button, etc). I'm interested in finding a tool or formula that I can apply to any color to achieve these distinctions.
I always do this manually as it is hard to find a balance between something that has enough tonal and visual contrast, but still is WCAG 2.0 level AA color contrast compliant.
The bootstrap buttons are always a good starting point for getting a feel for tonal differences http://getbootstrap.com/css/#buttons
Color wheel is a useful tool https://color.adobe.com/create/color-wheel/
