Suggestion: set body background color

[strider72]

On Windows, if a website background color is not set, IE and Edge use the Windows System background window color (but Firefox and Chrome always default to white). This is usually white, but can be changed if the user changes the OS Theme. To keep the appearance of sites standards across browsers, we therefore need to specify the background color for Body:

body{color:black;background-color:white}

(We may not need to specify black text, but I personally have a hard and fast rule to always specify one with the other.)

[jonathantneal]

If you intend to use operating system colors, be sure your site works in High Contrast Mode.

• https://support.microsoft.com/en-us/help/4026951/windows-turn-high-contrast-mode-on-or-off-in-windows
• https://www.w3.org/wiki/CSS/Properties/color/keywords#System_Colors

If you intend to enforce a color scheme, like black on white, then you should enforce it yourself.

More details:

• https://webaim.org/blog/high-contrast/
• https://support.google.com/accessibility/android/answer/6151855?hl=en

Loosely related, as some may also be using this for preference over accessibility:

• https://9to5mac.com/2017/06/09/ios-11-dark-mode-smart-invert-colors-how-to-enable/

[strider72]

This is literally about NOT defaulting to the System colors on some browsers. As Normalize is intended to create consistency between browsers, avoiding default system colors used by only certain browsers helps to do just that.

[jonathantneal]

These browsers already consistently honor system colors. That is what is normal. You are asking for an opinionated change.

I get that one might prefer everyone use black on white, and that’s a choice each developer can make for their site, but it’s at the expense of those who don’t, and who are more likely to need them to be different.

[tomasz1986]

There are actually a lot of problems with how browsers deal with High Contrast themes in Windows. As a high contrast themes user myself, I have been (unfortunately) tackling with them quite often.

Chromium completely ignores the themes when it comes to displaying webpages, but still applies them to some parts of its UI (which looks fine with High Contrast White based themes, and horrible with High Contrast Black based themes).

Firefox has settings that decide whether the High Contrast themes should be applied or ignored. The issue is that even if set to ignored, the browser will still apply them if a specific value is not set in a website's CSS. For example, if a website's background-color is unset, Firefox will apply the system theme's Window colour to it.

This often results in something like this

which "by design" should be just displayed in white

but, as you can see, is not, as the website's background-color is not specified in its CSS, and Firefox has applied the theme's Window colour to it (even if set to ignore High Contrast themes). In this particular case, the content is still readable, but may not be so on other sites.

I do not think it is a good idea to use a specific colour (e.g. white) for normalization. However, I do believe that a good practice would be to simply set it to one's colour of choice rather than leaving it empty (= assuming that it will always be white), as it is often the case.

[PixelJanitor]

Was going to submit a PR for a body color addition, and came across this issue here first. MacOS Mojave has introduced dark mode, which sets the body color to a dark as well. Here is a screenshot from a site I recently came across in it:

As you can see, this person always intended the body to be white, but dark mode now sets it to a darker color, breaking the intended UI colors. Either normalize would be a good place to solve this, or hopefully, Apple decides to set just the Safari window background back to white as the default.

[gitbreaker222]

I've seen a similar issue with input fields on Firefox and a dark themed Ubuntu (Zorin OS): Text inputs don't inherit body { color: black } and developers apply white background-colors without also specifying a dark text color as it is dark by default in most situations.

Here is a real-world-screenshot: The input text is invisible. You need to select it to understand, that you actually typed something (original: www.duden.de - I've seen same issue on other sites as well)

Here is a demo fiddle to reproduce https://jsfiddle.net/5r0feoum/

However I discovered, that we maybe could update the Form-Block of normalize, to solve this problem:

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  color: inherit; /* 1 === NEW ===  */
  background-color: inherit; /* 1 === NEW === */
  margin: 0; /* 2 */
}

...and then it looks like this (it would be reeeaally nice, if someone could also test on mac and win)

As a developer I'd expect this when using normalize, so I can be sure that inputs are accessible on light and dark themed operating systems, even if I only set an inputs background to white and forget to test in Firefox on a dark-themed OS

---

edit: I've solved this with the firefox extension "Text contrast for dark themes"

[jimmywarting]

I don't think we should be changing the background or text color to anything specific it should be based on users own preferences. So i think we should be doing this:

@media (prefers-color-scheme: dark) {
  * { color-scheme: dark; }
}

This will take care of a LOT of things that can be hard to modify like calendar icon in date inputs for instant. it will also change the background color to black and change the text color to anything appropriate.

See this jsfiddle demo https://jsfiddle.net/aLzn9ot8/

i think EVERY site should be using this weather or not they use native elements