Umbraco.UI icon indicating copy to clipboard operation
Umbraco.UI copied to clipboard

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

Open bjarnef opened this issue 2 years ago • 10 comments

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 https://github.com/umbraco/Umbraco.UI/pull/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

image

image

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

bjarnef avatar Nov 08 '23 17:11 bjarnef

image

@bjarnef I believe this issue can be closed.

markadrake avatar May 25 '24 23:05 markadrake

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

image

which should show this instead:

image

bjarnef avatar May 26 '24 19:05 bjarnef

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

Brown looks good:

image

There are some questionable ones, for example:

image

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

markadrake avatar May 27 '24 14:05 markadrake