Design Mockups: Button contrast

[yatil]

https://projects.invisionapp.com/share/H299QZZGZ#/screens/215895967

• I think the buttons in the “Help Improve this page” section need a border (or we’d need to underline the text in the buttons) as the background color of the button and the background color behind the button have not enough contrast.

[bakkenb]

+1 to a border on these buttons. Not a strong overwhelming border though, just enough to make the buttons stand out a bit more.

[AndrewArch]

as they are links (?) they should be styled as links rather than buttons imho

[yatil]

@AndrewArch They are call-to-action links. Basically the button-y shape signals a change of context (Opening the mail app, going to GitHub).

[AndrewArch]

@yatil, all the same they're still links to other pages aren't they? (apart from the email one that might open an email application - which is problematic by the way for many who use web-based email)

That said I can almost accept some button styling but not sure about a 'button' element. (See Marcy Sutton's discussion.)

[yatil]

They will be <a> elements (as they are in the tutorials and other documents right now). It’s just the look :-)

(Good call on the email one, we might to look into if we can do something that works – better? – with web-based email, but I doubt it.)

[James-Green]

Alicia will look at adding a thin border with a contrast ratio of 4.5:1 and potentially adding an underlined focus state as well.

[aliciafrausto]

I had to switch the styling up a bit to get this to look good (border did not look good). Went with green button + white text

https://visa.invisionapp.com/share/YPAVCUZA9#/screens/223719157