Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bjarnef opened this issue Nov 8, 2023 · 6 comments
Open

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

bjarnef opened this issue Nov 8, 2023 · 6 comments
Labels
accessibility A11Y improvements bug Something isn't working community/hackathon community/up-for-grabs needs triage This issue has not been tested by a team member yet

Comments

@bjarnef
Copy link
Contributor

bjarnef commented Nov 8, 2023

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

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 bjarnef added bug Something isn't working needs triage This issue has not been tested by a team member yet labels Nov 8, 2023
@markadrake
Copy link

image

@bjarnef I believe this issue can be closed.

@bjarnef
Copy link
Contributor Author

bjarnef commented May 26, 2024

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

image

which should show this instead:

image

@markadrake
Copy link

@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.

@nielslyngsoe
Copy link
Member

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:
image

Feel free to bring a proposal for this, thanks

@bjarnef
Copy link
Contributor Author

bjarnef commented Sep 19, 2024

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

image

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

image

@nielslyngsoe
Copy link
Member

nielslyngsoe commented Sep 20, 2024

Hi @bjarnef

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

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:
image

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. :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility A11Y improvements bug Something isn't working community/hackathon community/up-for-grabs needs triage This issue has not been tested by a team member yet
Projects
None yet
Development

No branches or pull requests

3 participants