Examples/Try it inherits the font color from browser prefs

Summary

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

1. Go to about:config,
2. 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,
3. Go to;
   • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#examples,
   • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter#examples,
4. 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.

https://user-images.githubusercontent.com/87250374/165396032-5c76e841-ee8a-427f-a145-6e16229eace4.mp4

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.

[schalkneethling]

@schalkneethling Can you tell if this is a use case that we support from an accessibility point of view?

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?

[674Y3r]

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.

	Light site theme	Dark site theme
Default values (expected)
Custom values

Default values:

• browser.display.background_color - #FFFFFF
• browser.display.foreground_color - #000000

Custom values:

• browser.display.background_color - #000000
• browser.display.foreground_color - #FFFFFF