[css-images][css-backgrounds] A method to fill the background of a partially transparent image with the max contrast color #10949
Description
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)
Possible solution
Calculating a maximally contrasting background color seems doable and something that would give a better result in almost all cases.
The 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:
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 #9674