[csswg-drafts] [css-images][css-backgrounds] A method to fill the background of a partially transparent image with the max contrast color (#10949)

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images][css-backgrounds] A method to fill the background of a partially transparent image with the max contrast color ==
_with my author hat on_

We maintain a website that exposes a large dataset of Belgian artists, musicians, organizations, ... Each item optionally has a thumbnail and these are often logo's that weren't intended for the design we are displaying it in.

Given the size of the dataset it isn't realistically possible to manually review each image and request an alternate from the person or organization in question. If such an alternate would even exist.

When these are opaque it generally doesn't matter. It might look messy but it should be readable if the image stands alone.

When images have transparency this starts to fall apart and you might end up with white text or a white logo on a white background. (or black on black in dark mode)

<img width="1376" alt="Screenshot of a webpage showing a blank area where there should be a visible image." src="https://github.com/user-attachments/assets/fd0e4409-6717-425b-ab8e-16a7a61a6949">

### Possible solution

Calculating a maximally contrasting background color seems doable and something that would give a better result in almost all cases.

This resulting color will always be either black or white (or very close to those if implementors want some freedom here)

I think it would be fine if this only has an effect on `<img>`.

The result could look like this:

<img width="823" alt="Screenshot 2024-09-26 at 13 40 54" src="https://github.com/user-attachments/assets/c95a0fcd-7d78-4a39-8600-cbbe43b4f568">

This isn't pretty, but it is readable.

### Alternatives

#### disallow images with transparency

This seems impossible given that more and more modern image formats support transparency.

#### pre-calculate a contrasting color for each image

This is technically possible, even for svg.
But it would be complex and out of reach of most authors.

--------

This has some overlap with https://github.com/w3c/csswg-drafts/issues/9674

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10949 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 26 September 2024 11:58:25 UTC