Color swatch contrast #1207
Color swatch contrast #1207
Conversation
|
Hi there @bjarnef, thank you for this contribution! 👍 While we wait for the team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:
Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution. If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request. Thanks, from your friendly Umbraco GitHub bot 🤖 🙂 |
There was a problem hiding this comment.
Pull Request Overview
This PR improves accessibility by implementing dynamic contrast adjustment for checkmark icons in color swatches to ensure they remain visible against all background colors.
- Adds automatic contrast detection logic to determine optimal checkmark color
- Updates color swatch styles to apply dark or light filters based on background color contrast
- Updates story examples with a more diverse set of colors to better demonstrate the contrast feature
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/uui-color-swatch/lib/uui-color-swatch.element.ts | Implements contrast detection algorithm and applies dynamic styling to checkmark icons |
| packages/uui-color-swatches/lib/uui-color-swatches.story.ts | Updates example colors to showcase the contrast feature with varied color values |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| #contrast(hex: string): string { | ||
| const rgb = this.#hexToRgb(hex); | ||
| const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000); |
There was a problem hiding this comment.
The magic numbers 299, 587, 114, and 1000 should be extracted as named constants to explain they represent the RGB to grayscale conversion coefficients and divisor.
| const rgb = this.#hexToRgb(hex); | ||
| const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000); | ||
|
|
||
| return o <= 180 ? 'dark' : 'light'; |
There was a problem hiding this comment.
The magic number 180 should be extracted as a named constant like 'LUMINANCE_THRESHOLD' to clarify its purpose as the brightness cutoff for determining contrast.
|
|
Added an example with the blue Besides that I also think it makes sense to add a border + margin to make it more clear for current selection - but also just navigating though swatches via keyboard and the outline focus on swatch. 
We may also neeed to consider the look inside color picker. 
Since the 
|
|
@iOvergaard @nielslyngsoe do you have any thoughts regarding this? |
1 participant
Description
This fixes #653 where the checkmark at some colors has too low contrast and for some colors almost impossible to see: #653 (comment)
Keep in mind
valuecan be any string value, whencolorproperty is used and color can bergbor gradient color as well.It may not solve every use-case e.g. for gradient and rgba colors with transparency, but work a bit better for solid colors as in Umbraco backoffice swatches and swatches in icon picker.
The chech color probably shouldn't rely on the color itself as it may contain alpha, and the more transparency, the more invisible the checkmark is.
GpMxWax2Or.mp4
Types of changes
Motivation and context
How to test?
Screenshots (if appropriate)
Checklist