Skip to content

Make button text more legible on new palette #6343

@owenatgov

Description

@owenatgov

What

Investigate, test and implement a way to make button text against the new primary red (#CA3535) and green (#11875A) more legible.

An idea that's been floated that is the best place to start is adding drop shadow to the text within the button.

Why

Whilst white on both the new red and green meet WCAG AA as background elements against white text (5.15 and 4.52 contrast respectively), their legibility in real terms is still less than ideal. Exploring options to manage this is worthwhile to do.

Who needs to work on this

Developer, Designer

Who needs to review this

Developer, Designer, Accessibility specialist

Done when

  • We have documented the issue
  • We have come up with some ideas for solving it
  • Create a pull request with the subtle improvement to use text-shadow (@selfthinker)
  • Possibly repeat desk research to understand whether text-shadow improves experiences for users and readability (Not assigned yet)
  • Create a new Github discussion in 'Brand refresh' for feedback from the community incl. in-context screenshots and examples in other colour modes (@CharlotteDowns)
  • Include in Monthly chat slides and do some other community engagement to get more answers on whether this is an improvement (@ImranH-GDS)
  • We have implemented the solution (moved to another card #4959)

Metadata

Metadata

Labels

Type

No type

Projects

Status

Done 🏁

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions