26

I am working on a app that has an area dedicated to color choosing, like so:

enter image description here

Now, ordinarily, this works fine, but what if the user chooses the same color as the background color? It would look like this:

enter image description here

This is poor in terms of contrast and the fact that it's a color is barely evident.

My current solution is to use a slight shadow (as pictured above) but that does not fully address the issue. What other possible solutions are there to establish contrast between the selected color and the background? Ideas would be much appreciated.

Improve this question
6
  • Can you put it inside a piece of the colour it will be used next to?
    – Andrew Morton
    Jul 12, 2021 at 19:42
  • @AndrewMorton By "put it inside a piece of the color it will be used next to" I assume you mean "the background color"? I don't really get what you mean.
    – JS4137
    Jul 13, 2021 at 5:58
  • Will the selected colour be used against the background as shown in the question, or against something else?
    – Andrew Morton
    Jul 13, 2021 at 9:33
  • As of now, it would be against the same background color, as shown in the question
    – JS4137
    Jul 13, 2021 at 10:57
  • 1
    The app would still be perfectly usable in that case. However, this is unlikely (though not impossible) because the UI in the picture is only shown when the user selects multiple objects with different colors, if the objects had the same color this UI would not show up
    – JS4137
    Jul 13, 2021 at 11:13

8 Answers 8

Reset to default
49

You could try adding a transparent black or white border on the inside of the coloured squares. This will look okay for most colors.

One drawback of this solution is that the border will be noticeable as a slight blur on bright colors. To remedy this you could measure the contrast between the selected color and the background and only show the border if the contrast is too low.

colors with a border to increase contrast

Improve this answer
7
  • 5
    This is a nice technique but could also annoy the user if they're trying to match the background, since it makes it much harder.
    – R.. GitHub STOP HELPING ICE
    Jul 12, 2021 at 1:32
  • 3
    Could then use the technique on 2 borders (top/bottom or left/right) so there still are parts where user could see if it's matching
    – Rafalon
    Jul 12, 2021 at 8:59
  • 3
    @R.. If the user were to try that, it would better to offer them "transparent" as an option
    – Bergi
    Jul 12, 2021 at 10:50
  • 1
    @Bergi Transparent is not the same thing as matching the background color. If the element they're selecting a color for is not always over that background, then it could produce unexpected results.
    – Logarr
    Jul 12, 2021 at 15:00
  • 1
    @Logarr Right, though that's not a classical background/foreground distinction. And even then, the option could be "match color of …" instead of "transparent". Just anything that doesn't require the user to select two alike-looking colors in two colorpickers, but directly gives them the ability to express their intention.
    – Bergi
    Jul 12, 2021 at 15:36
15

One working solution I found on my own was to add a "ring gradient" to the edge of each color, like this:

enter image description here

This complimented the shadows in boosting necessary contrast, and the fact that it's a gradient means that at least one of its component colors would create sufficient contrast even if the "inside" color was the same as one of the gradient colors.

However, it is by no means a one-size-fits all solution. The flaw with the approach is that it causes individual colors to have either more or less contrast depending on how close their hue is to the gradient colors. This will have to be changed.

Improve this answer
4
  • 34
    This is, in my opinion, quite ugly, and the presence of the gradient messes with my perception of the inner color. YMMV though.
    – Christian Legge
    Jul 12, 2021 at 17:37
  • 2
    Yeah, I thought the circles were themselves gradients...
    – Harper - Reinstate Monica
    Jul 12, 2021 at 21:09
  • @Harper-ReinstateMonica The circles are gradients.
    – David Wheatley
    Jul 12, 2021 at 21:54
  • 1
    @DavidWheatley Sorry, I meant the interior gray circles. It was a trick of the light.
    – Harper - Reinstate Monica
    Jul 13, 2021 at 3:49
10

Google doesn't care:

enter image description here

They possibly assume that anyone savvy enough to know they need to pick a color will understand that the color they pick might match the background.

MS Paint has a gray left and top border but a white right and bottom border. It seems to be about 1px so it's not terribly noticeable but seems to provide enough distinction between the background and color picker.

enter image description here

Per your comments on my answer here it seems like you are following neumorphism based on the screenshot you supplied.

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6#2309 shows almost your exact style but it adds a small border to the card.

I think that heading steadfast for a purist design style is not always the best choice. People appreciate when an interface is functional and intuitive; part of which is achieve via consistency but if the crusade for consistency derails functionality then it's unappreciated or even lives life as an unnoticed feature.

enter image description here

Improve this answer
9
  • I've seen some applications use the neumorphism to circumvent the issue, much like MS Paint's example but a bit more normalized. In my situation though, I would prefer not to, as it would be a huge departure from the styles of the rest of the UI.
    – JS4137
    Jul 13, 2021 at 12:22
  • @JS4137 See my update.
    – MonkeyZeus
    Jul 13, 2021 at 12:43
  • Yup, thanks for updating that - I will consider that option but I'll also wait for other answers to roll in first
    – JS4137
    Jul 13, 2021 at 12:51
  • 1
    @JS4137 Is part of the issue the fact that you have to click on the color box in order to change the color? Or is it editable via hex only? If the former then you definitely have to make it known that it's clickable and if the latter then I am afraid to tell you that absolutely nothing about the hex value hints to me that it's editable. As a web developer I am certainly going to try and type something there but I would hazard a guess that it ranks low for discoverability for the average user.
    – MonkeyZeus
    Jul 13, 2021 at 12:58
  • My intention is to allow editing the color by clicking on the color box. The hex value is not editable, it is just a label, and thus is styled as a label. Hope this clears things up,
    – JS4137
    Jul 14, 2021 at 12:13
5

Use a border with a high contrast opposed to the background color. It doesn't hurt the accessibiltiy if the inner content (chosen color) has a low contrast opposed to the border, but it hurts the accessibility if the border has a low contrast opposed to the background.

Any border color is fine as long as it has a contrast ratio of 3:1 (Level AA) but white would be nice in your example. Also if the color is clickable (not mentioned in the question) and can be tabbed over with a keyboard, use a thicker border for the focused element.

enter image description here

Improve this answer
2
  • 1
    This is a fair concept, but the issue is that users may perceive colors differently depending on the difference in brightness between the border and selection colors, and I generally wish to avoid that
    – JS4137
    Jul 12, 2021 at 14:03
  • 4
    That is indeed an issue, but that is the case for any background or border. The only way to overcome that is selecting the context background color as well, or hover the color over its intended context.
    – jazZRo
    Jul 12, 2021 at 14:52
2

The background of the color should be the color it'll be displayed upon.

(For instance it looks like the background behind the sample colors is 5F5F5F or thereabouts. If the chosen color will actually be displayed against 000000, then change that area so it's 000000).

For bonus points, you could make the "Apply to all" button in the color being chosen, making it obvious that you will have trouble using the UI if you choose that color.

enter image description here

It's instantly obvious this color choice won't work well.

The knobs that let you change color, however, should always be well contrasted, so a person can get out of the hole they dug. You can always use the old Atari trick of making any color stand out, simply XOR with 808080.

Improve this answer
6
  • Any color, as long as it's not 7F7F7F (RGB 127, 127, 127) :-)
    – Cody Gray - on strike
    Jul 12, 2021 at 23:56
  • @CodyGray or, as Henry Ford once said, "available in any color you like, as long as it's #000000." Seriously 7F7F7F xor 808080 should be FFFFFF.
    – Harper - Reinstate Monica
    Jul 13, 2021 at 3:52
  • That's an issue for me though, because there will always be one specific color that will cause trouble, even if it's literally the most absurd color choice in the world - if the user decides to colorpick the UI background ambient color the contrast will be lost again
    – JS4137
    Jul 13, 2021 at 6:01
  • @JS4137 I did some cheap photoshopping to show the effect I am talking about. Basically I inverted out your buttons, I hope you weren't married to them. This shows the color choices in context so a UI-breaking color choice will be instantly obvious.
    – Harper - Reinstate Monica
    Jul 13, 2021 at 14:51
  • @Harper-ReinstateMonica I had no objections to your changes, however I adhere to the principle of giving users the maximum amount of freedom in choosing whatever they want - including literally the UI background color. This has legitimate use cases, for instance if the user wanted to make a UI mockup using the app BG colors.
    – JS4137
    Jul 14, 2021 at 12:56
1

To address this issue in apps I develop, I use a generic function which computes the RSS of the difference between the newly selected background (or text) color and compare it to a user-specified threshold. If the RSS value is less than said threshold, indicating insufficient contrast with text (or background), I still accept the new background (or text) color but invert the color of the text (or background).

Improve this answer
1
  • 1
    Could you perhaps post a UI mockup of your approach? It sounds interesting but more detail via a visual mockup would be appreciated
    – JS4137
    Jul 14, 2021 at 12:12
0

Note that while I accepted the answer from @filip, I ultimately went with a different approach, shown below:

An image with 3 colors, one the same as the background UI, showing my solution to the issue

I chose to use a much more subtle white border at 20% opacity, as well as a faint shadow. This aimed to be a middle-ground between making the color easier to judge and keeping enough contrast.

Improve this answer
0

How about a double border? With a light and dark border it always works.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.