Warning text icon clipped in Firefox v73+ when using high contrast mode or overriding colours

[36degrees]

In the warning text icon, we use a 3px border (which is usually visually indistinct from the background) in order to better support users who use High Contrast Mode or override colours:

govuk-frontend/src/govuk/components/warning-text/_index.scss

Lines 29 to 31 in 36edb2f

	// When a user customises their colours the background colour will often be removed.
	// Adding a border to the component keeps it's shape as a circle.
	border: 3px solid govuk-colour("black");

Firefox 73 introduced a new 'readability backplate' feature:

Many users with low vision rely on Windows' High Contrast Mode to make websites more readable. Traditionally, to increase the readability of text, Firefox has disabled background images when High Contrast Mode is enabled. With today’s release of Firefox 73, we introduce a “readability backplate” solution which places a block of background color between the text and background image. Now, websites in High Contrast Mode are more readable without disabling background images.

The new solid 'block' of background colour causes a clipping effect around the warning text icon in Firefox 73+.

[36degrees]

We could consider using an SVG for the icon.

[36degrees]

After #2186 is merged, this should be fixed as and when / if Firefox implements the forced-color-adjust property – for which there are positive signals.

[36degrees]

Firefox 89 introduces support for the forced-colors CSS media, but seemingly not forced-color-adjust.

Looks like https://bugzilla.mozilla.org/show_bug.cgi?id=1591210 is the bug to watch for that property being implemented.

[36degrees]

Fixed in Firefox 113 Beta:

The forced-color-adjust property is now supported, allowing authors to opt an element out of color changes in Forced Color Mode for improved readability where the automatically-picked contrasting colors are not ideal.

https://www.mozilla.org/en-US/firefox/113.0beta/releasenotes/

Firefox 113 should be released on May 9.

[36degrees]

I'm going to close this as – other than waiting for Firefox 113 to be released – the issue has been resolved and there's nothing for us to do.