Buttons: Update hover and focus colors to meet color contrast requirements

nataliafitzgerald commented 6 years ago

Buttons: Update hover and focus colors to meet color contrast requirements

Some button states currently do not meet color contrast requirements for accessibility and should be updated:

These include:

Disabled button (Gray text on Gray 20 background)
Primary button: Hover and focus state (White on Pacific 80)
Destructive action button: Hover and focus state (White on Red 80)

Recommendations (some are still works in progress):

Disabled button

Current (Gray #43484e)	Recommendation (Dark Gray #d2d3d5)

Primary button

Background color for hover and focus states

Active state will need to be looked at too so that there is a unique active and hover/focused state
The only accessible options for white text on red are Dark Pacific and Pacific So we will not be able to accommodate a 3 separate Pacifics for default, hover/focus, and active. We can bring in a Navy, however.

Current (Pacific 80 - #4497dc)	Recommendation (Dark Pacific - #0050B4)

Destructive button

Background color for hover and focus states

Active state will need to be looked at too so that there is a unique active and hover/focused state.
The only accessible options for white text on red are Dark Red and Red. So we will not be able to accommodate a 3 separate reds for default, hover/focus, and active.

Current (Red 80 - #dd735d)	Recommendation (Dark Red - #B63014)

Scotchester commented 6 years ago

18F:

Note: Logos, disabled form fields, and disabled buttons are exempt from [color contrast guidelines] and don't need to be tested for contrast.

(Emphasis added.)

I agree that we should try to achieve them if possible, but if it's impossible to do so while having them visually still look disabled… :man_shrugging:

nataliafitzgerald commented 6 years ago

Yeah, that makes sense @Scotchester. I'm ok with making an exception for the disabled states so that they still maintain their visual meaning (i.e. look disabled).

nataliafitzgerald commented 5 years ago

@Scotchester Here's a mock-up of what we've discussed:

cfpb / design-manual