Examples/Try it inherits the font color from browser prefs

[674Y3r]

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

• [X] I have read the Community Participation Guidelines.
• [X] I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[caugner]

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

[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]

When setting a background color it is best practice to also set a foreground color and vice versa (in CSS).

It looks like the iframes have their background color set to white. However, the content inside has a transparent background and foreground color with a value set by the user agent stylesheet to canvasText :thinking: Opening the samples alone works fine. So my guess is that the background set for the iframe is the cause.

@674Y3r is it common to only set one of these when using these customization options?

I have no idea. Personally I have changed the color of all 4 options available in about:preferences#colors (text, background, unvisited/visited links).

Do other websites handle this better?

Most sites just override this. Although I've had numerous problems with larger/smaller sites that set only the background color or only the foreground color (causing various visibility issues similar to this one). Of course there are a few sites that don't set colors at all, but they are mostly old and very simple.

Did the version of MDN Web Docs before the redesign work correctly?

Sorry, but I don't know if I remember this correctly... I think it worked fine, but I'm not sure.

[caugner]

@674Y3r Could you please verify if the issue persists? I just checked in Firefox with the about:config settings that you provided, and the text of the examples appeared to be readable.

[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