Text colour for inverse button should use variable that indicates design intent

[paulrobertlloyd]

Related component

Button component.

Version v4.7.0 introduced an inverse button modifier (yay!), but it's hard coded to use govuk-colour("blue"):

govuk-frontend/packages/govuk-frontend/src/govuk/components/button/_index.scss

Line 39 in 635bb3c

$govuk-inverse-button-text-colour: govuk-colour("blue");

However, it’s not clear if this is blue because govuk-brand-colour is blue, or because govuk-link-colour is blue. In most cases, this doesn't matter because backgrounds and links are both blue. But when the brand or link colours differ from the default, what should an inverse button look like? Should it:

• Have a text colour that is the same as other links
• Have a text colour that is the same as the background it sits on (essentially giving it a ‘see-through’ appearance)

Context

• On the Mod Design System site, the inverse button shares the same colour as the background and the link colour, which are both #532a45:

  

• On X-GOVUK sites, the inverse button text colour is the same as the turquoise background (brand) colour (#2288aa), as links are Blue (#1d70b8):

  

Alternatives

On the prototype masthead component, am considering whether to override the hardcoded Blue colour to share that of the masthead’s background: x-govuk/govuk-prototype-components#134

Additional information (if applicable)

Happy with whatever design decision the Design System team come up with, but the colour in the codebase should indicate the design intent behind the colour chosen for inverse buttons; either govuk-brand-colour or govuk-link-colour (but not govuk-colour("blue")).

[paulrobertlloyd]

Accessibility consideration: the link text colour is (and should be) one that works with text on a white background. A brand colour is likely one that is chosen to work in large background areas and decorative borders, and may not have enough contrast when used for text. So I suspect the more robust choice is for the button text to share the colour of links.

[querkmachine]

Hmm, my concern is also that the brand colour has no guarantee of contrast when used against white—although the Notification Banner component appears to have already assumed it will, using $govuk-brand-colour on line 8 and hardcoding white text on top of it on line 33.

In my mind, we might want to do something like this:

• Add a new global settings variable, named something like $govuk-inverse-text-colour, so we can stop hardcoding our new inverse modifiers as always being white.
• Change $govuk-inverse-button-text-colour to be the same as $govuk-brand-colour by default.
• Change $govuk-inverse-button-colour to be the same as $govuk-inverse-text-colour by default.
• Change the above two variables to be publicly settable, as green start buttons already are, to account for any outlying situations.¹

Does that sound like it'd work for the use cases described here?

Footnotes

1. To contrive a circumstance. A team wants to keep the inverse text colour as white, as they use it on non-brand colours too (like black), but white does not provide suitable contrast with the brand colour, so they need to change one or both of the inverse button variables specifically. ↩

[paulrobertlloyd]

To underline the current issue, inverse button text may not match your brand colours, and if that brand colour is lighter, the inverse text colour won’t be accessible when sat upon it:

I think you’re right; hard-coding any of these exiting component colour values to either $govuk-brand-colour or $govuk-link-colour, while that might make this less of an issue, it would still be a problem with certain combinations.

Giving these values defaults that can be overridden globally, as you propose, seems like a brilliant solution!

Playing with that idea, all the following possible outcomes would be possible: