search

nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
https://design-system.nhsapp.service.nhs.uk/
MIT License
6 stars 0 forks source link

Card links: border style #173

Open davidhunter08 opened 4 hours ago

davidhunter08 commented 4 hours ago

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.

Screenshot 2024-10-17 at 10 54 25 Screenshot 2024-10-17 at 11 01 56

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 commented 4 hours ago

https://github.com/nhsuk/nhsapp-frontend/issues/11#issuecomment-2063462496

davidhunter08 commented 3 hours ago

Button v Card link comparison

Screenshot 2024-10-17 at 11 31 35

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

Current sizes:

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).