Button contrast colours are not accessible

[lucascumsille]

I know this is part of a wider discussion about our colours across all our websites and applies not only to the buttons but other sections as well. But I'm raising this issue because I think we could add an easy provisory fix to improve the experience.

While we figure a permanent solution, we could add the following fixes:

• [ ] green button use colour: #333333
• [ ] .btn--negative and .donate-button to use a the same background-colour. Not sure if they use different colours on purpose to make the user aware they have different intentions, but the difference is quite subtle.
• [ ] For the .btn--negative and .donate-button use a slightly darker version for the current red we are using, we can keep the white colour and pass the contrast test.

This is how it would look:

@ajparsons let me know if this sounds ok with you and I'll go ahead.

[ajparsons]

Cool, these are fine except for the search button.

If you scroll down on the homepage you get the big search box - here black text works fine because it's black > green > black.

But at the top, white > green > black seem very low contrast.

Why can't we just defer to the bootstrap colours here? https://getbootstrap.com/docs/5.0/components/buttons/ That seems to be doing the same job ok.

In general I'd be really good to some proper time thinking about the general picture - I'm still not wild about the black on green in the big text on the homepage (https://github.com/mysociety/theyworkforyou/pull/1699) but it was the quicker fix at the time.