search

mdn / interactive-examples

Home of the MDN live code editor interactive examples
Creative Commons Zero v1.0 Universal
726 stars 506 forks source link

fix: Improve contrast of SVG element #2771

Closed onno-vdbroek closed 2 weeks ago

onno-vdbroek commented 3 months ago

Description

Improve contrast of the SVG element's fill to the SVG element's border and page background for issue #2054

Motivation

The SVG element's fill didn't comply with the WCAG contrast criteria. By improving the contrast it now complies with the WCAG AA criteria for Graphical Objects and User Interface Components.

Additional details

Related issues and pull requests

github-actions[bot] commented 3 months ago

It looks like this is your first pull request. 🎉 Thank you for your contribution! One of the project maintainers will triage and assign the pull request for review. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

onno-vdbroek commented 3 months ago

Hello @chrisdavidmills!

Thank you for reviewing my pull request.

The example we're talking about is indeed https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.

As mentioned in a comment on this issue (https://github.com/mdn/interactive-examples/issues/2054#issuecomment-1331308570) the example doesn't meet proper contrast guidelines in dark theme. My modification is about the background fill of the SVG element versus the dark theme page background (hex color #1b1b1b), not the text.

I found that the original background fill of the SVG element versus the dark theme page background didn't pass any WGAC tests. To comply with the contrast criteria I changed the SVG background fill to a lighter color so it passed the WCAG AA test for Graphical Objects and User Interface Components.

You're right that my modified background fill fails with the WGAC AAA for Normal Text. But it still complies with the WGAC AA for Normal Text.

I think by changing the SVG background fill color we now have the best possible outcome: it complies with the WGAC AA for Normal Text (by testing the SVG background fill versus the text) and it passes the WCAG AA test for Graphical Objects and User Interface Components. (by testing the SVG background fill versus the dark theme page background)

I hope I clarified the reason for my pull request. It was a bit tricky to find the right color that passes the most amount of tests (SVG background fill versus page background/versus SVG stroke/versus text).

This is my first pull request ever so I'm thankful for your help. If anything is still unclear I'm happy to try to explain it further.

bsmth commented 1 month ago

FYI I think this was already touched in https://github.com/mdn/interactive-examples/commit/f32a584cb847b5454270afc94d906de25080bedd#diff-f21bbc22811d892093185d1644b55edd90f715a2fa108e00c07735e8cc6d63fa, although this change does make some contrast improvements.

onno-vdbroek commented 1 month ago

Thanks for reviewing my change. Unfortunately, I didn't know this issue was already touched because when I made the change, the checkbox for this issue/fix wasn't checked. Although I hope my contribution was helpful. :)

bsmth commented 2 weeks ago

Sure thing, I think we can merge this. Thank you!