uui-swatch: checkmark has too low contrast on light colors

[bjarnef]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.6.0-rc

Bug summary

It seems #649 changed the uui-swatch so checkmark doesn't has sufficient contrast on light background colors, e.g. on yellow background the checkmark used to be black: https://uui.umbraco.com/?path=/story/uui-color-swatches--overview

That's why it had the isLight() function and set the color-swatch--light CSS class.

Specifics

No response

Steps to reproduce

Select light colors in uui-swatches or uui-swatch and notice checkmark is always white.

Expected result / actual result

No response

[markadrake]

@bjarnef I believe this issue can be closed.

[bjarnef]

While it has changes for yellow, it seems to have low contrast for other colors.

which should show this instead:

[markadrake]

@bjarnef what page of the UUI site are you using for your screenshot?

Brown looks good:

There are some questionable ones, for example:

Perhaps overlaying a check isn't the right, or "most accessible" solution anyways.

[nielslyngsoe]

Hi @bjarnef and @markadrake

Thanks for elaborating on this.

I think this could be fixed by aligning the selection style with other components.

This would mean instead of using the checkmark, we should show the selection by appending a 2px think border with the UUI selection color. To avoid color collision a transparent space (2px?) between the two would be needed. So to avoid it becoming too big the selection state would most like shrink the actual color box.

Here is a somehow similar approach to conceptualize the idea:

Feel free to bring a proposal for this, thanks

[bjarnef]

@nielslyngsoe yes, outline/border highlight be an option.

I think the is light/dark approach could be useful in some scenarios based on the selection style. Or perhaps for other features.

[nielslyngsoe]

Hi @bjarnef

sounds good, and good reference you have there.
I would not mind making the color option round, similar to your screenshot here:

And here was another reference i just stumbled upon, This one demonstrates how the Selection border, is of the same radius as the non-selected options. Which technically shrinks the color circle, to make room for the selection border:

I'm not determined about which of such solutions is best, I just wanted to pitch the idea. I will say it depends on the available space. If the spacy look works and therefor the border can be appended or if the option has to shrink to make room for the border. :-)