Button contrast and visual marker changes

[jonathanconway]

At the moment colour is the only way of visually distinguishing a focussed button from a non-focussed button.

From tracing back the variables, it seems like there is at most a 10% colour difference (in terms of lightness) between regular button state and hover button state.

See below:

Should we either increase the contrast or add an additional visual marker of focused-ness, e.g. a border?

[klepas]

Just echoing what I noted in slack—

imho:

• colour alone is insufficient
• visual markers (addition/subtraction of something, or a bevel/depressed effect — eg for when it’s actively clicked) are good
• this applies for :hover, :focus, and :active… and balancing all three can be hard. :)

[jonathanconway]

Hmm... I can imagine an :active state being useful for, say, a toggle-button.

[jonathanconway]

Update:

New design guide buttons also don't entirely conform to WCAG, in terms of colour contrast.

Regular buttons conform to AA but not AAA.
Disabled buttons conform to neither AA nor AAA.

Deleted. Government isn't required to support AAA and disabled buttons are actually black on grey, which passes AAA.

[AndrewArch]

buttons need a visible indication when they receive keyboard focus - this can be a distinct colour change (at least a 3:1 contrast difference between focus/non-focus states, while still maintaining the text:background contrast of 4.5:1) or an additional indicator like a border or pattern - https://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-visible
See also

• https://www.nomensa.com/blog/2013/why-the-focus-indicator-is-important
• http://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/

[klepas]

Just adding some more bg info on the direction in 2.x:

• we will be adding button variants: primary, secondary, tertiary, and disabled states for all 3.
• we will adhere to the WCAG 2 AA guidelines (thanks @AndrewArch)
• this may mean we add insets/non-colour changes, but it will likely result in just colour changes — up to @gazhands.

I’m closing this unless there are objections to re-open.

[AndrewArch]

Just to also note - all color changes need to be checked against color blindness as well as contrast

(no need to reopen - just adding to my a11y note)

[gazhands]

Cheers all