CSS live examples: color contrast improvements #2848
Conversation
|
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. |
There was a problem hiding this comment.
Hi @ferdnyc, and thanks for your contribution to MDN — this is really useful!
I have approved it and could merge, but I'm holding off for now in case you want to add more fixes to this PR. Let me know if you want me to go ahead and merge it.
For the demonstration elements with background-color: yellow, also set explicit foreground color. Prevents white-on-yellow text, with the dark skin.
For demonstration elements with background-color: set and text content, also set explicit foreground color.
|
Thanks @chrisdavidmills — so far I've found three more https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility Also fixed (in a separate commit). I'll keep looking through the examples for more. |
ferdnyc
changed the title
The default filter in the example is a drop-shadow, which will be invisible in dark mode against the default black background. Add an `.example-container` div with background-color set to `#fff`, so that the effect is visible regardless of the selected theme.
|
And https://developer.mozilla.org/en-US/docs/Web/CSS/filter#try_it needed a container element added to make the background white, so that the default drop-shadow filter is visible in dark mode. |
chrisdavidmills
changed the title
|
Nice work @ferdnyc; these make perfect sense. Tell you what, I'm going to merge this now; I think it'd be good for you to open new PRs for any more that you find. Maybe do them in blocks of about 8-10 per PR, so that improvements are published quickly and each one is nicely manageable? Thanks again for the super-helpful contribution. |
|
Congratulations on your first merged pull request. 🎉 Thank you for your contribution! Did you know we have a project board with high-impact contribution opportunities? We look forward to your next contribution. |
Description
For the demonstration elements with
background-color:set and text content, also set explicit foreground color.Motivation
Prevents contrast issues (unreadable text inside the element), with the dark skin.
Additional details
I noticed at https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start#try_it that, with the dark site palette enabled, the yellow absolutely-positioned element appeared to contain no text — because it was rendered in white over yellow, due to the element's background-color being set while leaving the default text color.
I'd be pretty surprised if this is the only instance of color clashes due to incomplete styles, across the examples — it'd probably make sense to tackle them all at once, or at least as many as possible. So, feel free to consider this a WIP / starting-point PR. I'm willing to scan (ar at least grep) through the rest of the demo CSS files to look for more styles that need to be fixed in a similar manner, if it'd be a useful project to undertake.