Card links: border style

[davidhunter08]

Description

The current colour contrast of the page background and card links surrounding border is 1.24:1. As it does not meet the non-text contrast ratio of 3:1 it makes the border somewhat redundant.

Blog post on non-text contrast of UI elements

https://iknowdavehouse.medium.com/why-debate-non-text-contrast-of-ui-elements-1be4313c9e12

Every time you design or build something, take 10 minutes to review it with all the parts of the interactive UI elements that do not meet 3:1 contrast ratio removed.

So if your button background does not meet 3:1 remove it, if your interactive card borders do not meet 3:1 remove them…

Then ask yourself:

• Is the interface still understandable?
• Is the interface still as usable?
• Could I do more?

[davidhunter08]

#11 (comment)

[davidhunter08]

Button v Card link comparison

Something to consider is the visual alignment between buttons and card links (spacing, text size, border width etc).

Current sizes:

• Secondary button border 2px v Card link border 1px
• Button text size (mobile) 16px v Card link text size (mobile) 19px

Note: We're currently in the explorative stage of the secondary button and secondary card links.

Also the example above has the divider line connected to the right of the card link, but that still needs to be decided (see this issue).

[michaelgallagher]

@davidhunter08 re: the above note "Something to consider is the visual alignment between buttons and card links (spacing, text size, border width etc).", i made a little doodle...

the point here =

• we have a proposal for a secondary button style with an outline that is 2px thick with round corners
• cards are basically buttons
• should button-y things be more visually aligned? (same type size, same vertical padding, same outline style, add a beard to card link sets)

[davidhunter08]

Some exploration of border styles, font sizes, spacing on card links:

Screenshots on Mural

cc @michaelgallagher