Re: [csswg-drafts] [css-color-adjust-1] background-color in forced color modes needs more than a simple unset (#4175)

We were also asked in the last discussion to provide examples.  Here's a quick one that covers the two problematic cases:

https://codepen.io/AmeliaBR/pen/dyoLMGd

![demo with regular colors, a button with text and icons and a pop-up tooltip that partially obscures other text on the page](https://user-images.githubusercontent.com/9876129/78195634-697f5100-743d-11ea-85da-e6c1a8b0cab9.png)


Both issues are demonstrated using childs of buttons, but they could be childs of any element that has special colors in forced-color mode (e.g., links).

One element (svg icon) must have transparent background or it will obscure the text. The other element (pop-up) needs to have a solid background, and that background color must be properly paired with the text color (which in forced-color mode would be the inherited button text color).

Here's how it looks in Chromium Edge currently, with various color schemes:

1. One of the standard dark mode contrast schemes. Note that the button white text is used on the pop-up, instead of the main canvas green text, but that the button and canvas backgrounds are both black.

   ![image, as described](https://user-images.githubusercontent.com/9876129/78195896-0f32c000-743e-11ea-85f1-bfd482ef0281.png)

2. One of my custom low-contrast schemes, and then a custom high-contrast I made for this demo. In these cases, the button and canvas backgrounds are different, so you see that Edge is drawing in a backplate around the button text that is not the right color for the button, and similarly the background color used for the pop-up isn't correct.  The first one is supposed to have pink text on dark blue buttons, the second one is supposed to have dark blue text on yellow buttons:

  ![color scheme is mostly purple and light blue. the padding area of the button is dark blue, but the text color is pink](https://user-images.githubusercontent.com/9876129/78195800-c7139d80-743d-11ea-9ad4-8773ae1b0008.png)

  ![different colors, but same issues, and even worse readability](https://user-images.githubusercontent.com/9876129/78196045-751f4780-743e-11ea-8860-16ebfb96ba8a.png)


-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4175#issuecomment-607541377 using your GitHub account

Received on Wednesday, 1 April 2020 23:37:20 UTC