Examples/Try it inherits the font color from browser prefs
See original GitHub issueSummary
If user changes font color in the browser settings, the text in the examples will also change it, but the background will remain white. This can cause contrast issues.
URL
Any page with Examples section, e.g: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#examples https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter#examples
Reproduction steps
- Go to
about:config
, - Change the value of;
browser.anchor_color
to#ff0000
,browser.visited_color
to#00ff00
,browser.display.foreground_color
to#ffffff
,browser.display.background_color
to#000000
,
- Go to;
- See red/lime links and white text on white background.
Expected behavior
Links and text shouldn’t change color based on these prefs.
Actual behavior
Links and text change color depending on these prefs.
Device
Desktop
Browser
Firefox
Browser version
Pre-release (e.g. Beta, Nightly or Canary)
Operating system
Linux
Screenshot
Example video with browser.anchor_color
. From the first URL.
Example screenshot with browser.display.foreground_color = #ffffff
. Only the selected part of the text is visible. From the second URL.
Anything else?
The Try it
boxes have a similar problem only with links. Should this be a new bug report?
Validations
- I have read the Community Participation Guidelines.
- I have verified that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
- I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.
Issue Analytics
- State:
- Created a year ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
This can help in these situations I believe: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
Thank you for bringing this issue to our attention @674Y3r.
When setting a background color it is best practice to also set a foreground color and vice versa (in CSS). @674Y3r is it common to only set one of these when using these customization options? Do other websites handle this better? Did the version of MDN Web Docs before the redesign work correctly?
Unfortunately, depending on the case, the issue still persists. It is mostly visible with tables. Using https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr#frame_explicitly_specifying_table_content_groups as an example in Firefox Nightly.
Default values:
browser.display.background_color
-#FFFFFF
browser.display.foreground_color
-#000000
Custom values:
browser.display.background_color
-#000000
browser.display.foreground_color
-#FFFFFF