Add default white background color to inputs to complement default #222 foreground color - avoids unreadable text for users with dark themes.

[timmytofu]

Users on systems who chose a dark theme - for aesthetic preferences or because dark backgrounds aide their vision (ex. colorblind) - have inverted system default foreground and background colors. CSS designers often change just the foreground color, assuming the background will be white. This causes unreadable black/almost black text on a black background. Many many sites do this, including ones that should know better, for example:

If one is going to set a foreground color, one should also set a complementary background color. If HTML5 Boilerplate was diligent about this it would have a wide effect.

[drublic]

Thanks for taking the time to file this bug and sorry for the lack of updates for this issue.

Your argument seems valid to me. I don't know if setting the background color of the mentioned elements to white is the correct answer the problem.
Personally I would prefer to remove the text color of these elements since most people will overwrite it at some point while developing their own project anyway.

It is important to find a solution to the problem but I am not sure setting a default background color is the right answer here.

What do you think?

[timmytofu]

As a user of a dark theme without a vision impairment, forcing the white
background will generally be better for me, because while it's true sites
will often set a foreground color anyways, many many neglect to set a
complementary background color, assuming it's always white. H5BP enforcing
the blackish-on-white default will at least match the expectation designers
seem to have.

On the other hand, if a site choses not to specify any foreground or
background color for input, it will maintain the system default, which can
make the site look strange (a big white site with suddenly inverted colors
in the input) but for colorblind users, for example, it will at least
maintain the inverted contrast they intentionally set, while having
black-on-white defaulted by H5BP will flip that around. I'm not sure how
many vision impaired users rely on the system default colors versus those
that use special software to override everything regardless of what the
browser/application says the color should be, maybe not many.

For me setting the background works better, but I'll defer to you on
whether setting that globally is right or not, as long as either both or
none are set.

On Sat, Sep 7, 2013 at 3:53 PM, Hans Christian Reinl <
[email protected]> wrote:

Thanks for taking the time to file this bug and sorry for the lack of
updates for this issue.

Your argument seems valid to me. I don't know if setting the background
color of the mentioned elements to white is the correct answer the the
problem.
Personally I would prefer to remove the text color of these elements since
most people will overwrite it at some point while developing their own
project anyway.

It is important to find a solution to the problem but there I am not sure
setting a default background color is the right answer here.

What do you think?

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/1390#issuecomment-24008396
.

[colmtuite]

I don't like this change. I like Boilerplate because it doesn't prescribe a design aesthetic for me. I like to style my own UI elements and I don't want to have to override CSS to do so. Boilerplate should not go down the road of trying to make up for designers flaws.

[timmytofu]

Then the foreground should not be set; the point of this is that either
both or none should be set, not just one. This isn't about aesthetic,
though, just usability.

How are you styling elements if not by CSS?
On Sep 23, 2013 8:29 PM, "Colm" [email protected] wrote:

I don't like this change. I like Boilerplate because it doesn't prescribe
a design aesthetic for me. I like to style my own UI elements and I don't
want to have to override CSS to do so. Boilerplate should not go down the
road of trying to make up for designers flaws.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/1390#issuecomment-24966643
.

[colmtuite]

Yeah, sorry, I was suggesting neither should be set. I'm basically never going to use the foreground color BP sets anyway, I'm going to customize it to suit my own app. Since we can't choose a color that suits everyone, applying one is pointless.

It does serve as a good indicator of which elements you should apply your foreground color to though. So I think the best option is to replace the foreground color with a comment - /* Set your color here */

[paulirish]

Does anyone have numbers on this? I am curious how many people are affected by it.

My take is that if you change the default OS theme to something with dark background, you're responsible for how form controls etc look. It's near impossible to expect all of the web to throw redundant styles at form elements when something like 99% users don't have a problem with them.

As far as I know, OS-level high-contrast modes do not have this problem.

[jonrandahl]

I may be showing my age here a bit but didn't the early usability and accessibility advocators like Jacob Nielson of nngroup.com and Roger Johansson of 456bereastreet.com recommend to sort out both foreground and background colours when either one was set in css?

Hell, even while working in homesite back in the day it prompted you via topstyle to set both when you validated your work so shouldn't it be an either both or none?

Damn I feel old now....

[drublic]

The color we set on the inputs is still opinionated and I think we should let the OS/Browser figure out what color is best in input fields. So I am still in favor of removing the default color from all from elements.

Any more @h5bp/html5-boilerplate?

[alrra]

Paul: ... expect all of the web to throw redundant styles at form elements when something like 99% users don't have a problem with them.

Hans: I think we should let the OS/Browser figure out what color is best in input fields. So I am still in favor of removing the default color from all from elements.

👍

edit: @timmytofu can you update the commit, and:

• remove the default color for all form elements
• provide a short description in the commit message why the above was done
• update CHANGELOG.md

[alrra]

Fixed in 1c4df2a.