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