Bikeshed-generated specs have unreadable img alt-text, when viewed with dark color-scheme preference

[dholbert]

STR:

1. Configure your OS and/or browser to have a dark color-scheme preference.
2. Load https://drafts.csswg.org/css-grid-1/#intro
3. Force the images in that section to show their alt-text, by e.g. reloading with a slow network connection, or by changing the image src attributes to # (you may need to nudge them to redisplay by adding/removing display:none).

EXPECTED RESULTS:
Readable alt-text.

ACTUAL RESULTS:
The image's alt text shows up with light-gray text on a white background, which makes it ~unreadable.
Screenshot:

ANALYSIS

• The light-gray text color here is #ddd which comes from a general color: var(--text); declaration for a body {...} style rule. i.e. it's just the color that we're using by default for all text in the document (assuming it'll be displayed over the dark background)
• The white background color here comes from this style rule:
  

  bikeshed/bikeshed/stylescript/colors.css

  Lines 216 to 218 in 880b32e

  	/* In case a transparent-bg image doesn't expect to be on a dark bg,
  	which is quite common in practice... */
  	img { background: white; }

Perhaps we should add color:black or similar to that rule? In general, it's good practice to set color and background as a pair, to ensure sufficient contrast.

[dholbert]

(I've tested and reproduced this in both Firefox and Chrome, btw, so this isn't a browser-specific issue.)

CC @tabatkins (though they probably get pinged automagically here, I suspect)

[tabatkins]

Yeah, that's def a styling issue. The issue, tho, is that we want to make sure that opting your image out of the white background is as easy as possible, and having to set two properties isn't as good - if you forget to reset color as well, you'll have the same problem but in reverse.

I'll have to think a bit on if there's a good solution.

[tabatkins]

(though they probably get pinged automagically here, I suspect)

and yes, I do ^_^

[dholbert]

Not particularly surprising, but just as confirmation - this affects other specs as well, not just the grid spec. I just noticed it when reading the css-text-decor-3 spec when some images in the spec happened to load slowly: