SVGs don't match colour of parent text #162
Labels
Comments
gregtyler
added a commit
that referenced
this issue
May 17, 2022
Rather than embedding SVGs as background images, use them inline. This allows them to keep their parents' fill colour, so they can always adapt to match the text. This is an accessibility enhancement as it means that users who use tools like high-contrast mode to force changes in background and foreground colours will continue to be able to see iconography. Without it, icons are invisible if they're the same colour as the forced background colour. Fixes #162
Merged
gregtyler
added a commit
to gregtyler/moj-frontend
that referenced
this issue
May 17, 2022
Rather than embedding SVGs as background images, use them inline. This allows them to keep their parents' fill colour, so they can always adapt to match the text. When forced color mode is active (e.g. Windows High Contrast mode), we need to force the fill colour to match the context (i.e. text or link colour), otherwise it doesn't pass through properly on Windows. This is an accessibility enhancement as it means that users who use tools like high-contrast mode to force changes in background and foreground colours will continue to be able to see iconography. Without it, icons are invisible if they're the same colour as the forced background colour. Fixes ministryofjustice#162
gregtyler
added a commit
that referenced
this issue
May 18, 2022
Rather than embedding SVGs as background images, use them inline. This allows them to keep their parents' fill colour, so they can always adapt to match the text. When forced color mode is active (e.g. Windows High Contrast mode), we need to force the fill colour to match the context (i.e. text or link colour), otherwise it doesn't pass through properly on Windows. This is an accessibility enhancement as it means that users who use tools like high-contrast mode to force changes in background and foreground colours will continue to be able to see iconography. Without it, icons are invisible if they're the same colour as the forced background colour. Fixes #162
gregtyler
pushed a commit
that referenced
this issue
May 18, 2022
|
🎉 This issue has been resolved in version 1.4.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Where we use inline SVGs (i.e. Primary navigation with toggle search, Rich text editor and Timeline), the colour of the SVG icons is hard-coded into the SVG files themselves.
This means they don't adapt to the text colour around them changes, which makes the icons disappear in certain visual modes. For example, in Windows High Contrast mode, the background is changed to black and any black icons cannot be seen.
Instead, the SVGs should have the CSS attribute
fill: currentColoron them so that they match the surrounding text colour. The individual SVGs will also need to be updated to remove the hard-coded fill colour.The text was updated successfully, but these errors were encountered: