Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG currentColor contrast themes #126

Closed
2 of 3 tasks
andij opened this issue Dec 16, 2021 · 2 comments · Fixed by #132
Closed
2 of 3 tasks

SVG currentColor contrast themes #126

andij opened this issue Dec 16, 2021 · 2 comments · Fixed by #132
Assignees
@andij @jholt1
Labels
Severity: Medium Limited impact on user interaction, should be resolved but not required for immediate focus Type: Bug Something isn't working

Comments

@andij
Copy link
Contributor

andij commented Dec 16, 2021 •
edited
Loading

Outcome

Functional SVGs are accessible in contrast themes.

Noted in a previous comment when styling the cta component: #21 (comment)

Scope

  • Discover any potential solutions, agree course of action with the team
  • Implement into existing components where required
  • Document solution to ensure it's implemented for all future components

References:
https://melanie-richards.com/blog/currentcolor-svg-hcm/
https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
@andij andij linked a pull request Dec 17, 2021 that will close this issue
icon fill #132
Merged
@andij andij added Severity: Medium Limited impact on user interaction, should be resolved but not required for immediate focus Type: Bug Something isn't working labels Dec 17, 2021
@andij
Copy link
Contributor Author

andij commented Dec 17, 2021 •
edited
Loading

Here's the MDN page on forced-color-adjust:
https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust

And a Codepen for testing:
https://codepen.io/andij/pen/WNZjboe

Here's a screenshot of the Codepen on Windows 10, Edge 96.0.1054.53 in High Contrast:
Screenshot 2021-12-17 at 09 21 18

@andij
Copy link
Contributor Author

andij commented Dec 20, 2021 •
edited
Loading

On further investigation it appears that setting fill: canvastext; within the forced-colors @media query has the desired effect.

Observe the colour of the second SVG:

In High Contrast Black

Screenshot 2021-12-20 at 13 24 21

And High Contrast White

Screenshot 2021-12-20 at 13 22 42

@andij andij added Status: Review Needed The issue has a PR attached to it which needs to be reviewed and removed Status: Review Needed The issue has a PR attached to it which needs to be reviewed labels Jan 5, 2022
@PtitBen PtitBen added the Status: Review Needed The issue has a PR attached to it which needs to be reviewed label Jan 13, 2022
@PtitBen PtitBen removed the Status: Review Needed The issue has a PR attached to it which needs to be reviewed label Jan 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andij andij

@jholt1 jholt1

Labels
Severity: Medium Limited impact on user interaction, should be resolved but not required for immediate focus Type: Bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

icon fill centrica-engineering/muon
3 participants
@andij @jholt1 @PtitBen