Contrast & Opposite Colors

Question

Contrast & Opposite Colors

Nathan Sokalski 4,111

I have found many articles & forum discussions on this, but I still haven't found a good simple solution. What I need to do is determine when I need a border on the shapes I am drawing. The shapes will always be solid opaque colors, and will be very basic (such as circles & squares). My goal is to hide the border when possible, but in order to make sure the shape is always visible, display it when the shape & background (which will always be #FF808080). What is the best way to determine when to display a border?

Reza Aghaei 4,986 Reputation points MVP

2022-07-19T23:26:58.95+00:00

Considering what you mentioned 'I have found many articles & forum discussions on this, but I still haven't found a good simple solution.', I'd think it'll be pretty hard to share a solution here, because you may have seen it already but you may not like it. Maybe it's better to share link of a few solutions that you have tried and tell us what's wrong with those solutions. It'll save people time from sharing solutions that you have already tried and give them a better understanding of why you may like/dislike a solution and let them know what you are looking for.
Nathan Sokalski 4,111 Reputation points

2022-07-20T00:12:50.367+00:00

The problem with most of the stuff I found is that they tell you how to calculate a contrasting color. I do not want to change the color of my background or shape, I just need to know whether to include the border. In other words, I am looking more for something that returns a Boolean (Yes you should include the border ---OR--- No you should not include a border). When looking at the following page:

https://www.had2know.org/technology/color-contrast-calculator-web-design.html#:~:text=The%20higher%20the%20contrast%20between%20the%20text%20and,to%20255%20%28or%2000%20to%20FF%20in%20hexadecimal%29.

It gave equations, but based on the Pass/Fail examples, it wouldn't do what I want, because all the Fail results were way too easy to see for me to consider a border necessary.
Nathan Sokalski 4,111 Reputation points

2022-07-20T00:17:11.763+00:00

I think one other thing that is making my scenario different from the ones on the sites I found is that I am working with solid shapes, while the sites & articles talk about text.
Viorel 122.7K Reputation points

2022-07-20T16:27:56.3+00:00

Instead of Contrast & Oposite Colors, probably you should search for "Color Difference" that takes into account how colors are perceived. There are several formulae ("Delta E). You can compare the shape's color with background and with other shapes.

1 answer

Your answer

Reza Aghaei 4,986 Reputation points MVP

2022-07-19T23:26:58.95+00:00

Considering what you mentioned 'I have found many articles & forum discussions on this, but I still haven't found a good simple solution.', I'd think it'll be pretty hard to share a solution here, because you may have seen it already but you may not like it. Maybe it's better to share link of a few solutions that you have tried and tell us what's wrong with those solutions. It'll save people time from sharing solutions that you have already tried and give them a better understanding of why you may like/dislike a solution and let them know what you are looking for.
Nathan Sokalski 4,111 Reputation points

2022-07-20T00:12:50.367+00:00

The problem with most of the stuff I found is that they tell you how to calculate a contrasting color. I do not want to change the color of my background or shape, I just need to know whether to include the border. In other words, I am looking more for something that returns a Boolean (Yes you should include the border ---OR--- No you should not include a border). When looking at the following page:

https://www.had2know.org/technology/color-contrast-calculator-web-design.html#:~:text=The%20higher%20the%20contrast%20between%20the%20text%20and,to%20255%20%28or%2000%20to%20FF%20in%20hexadecimal%29.

It gave equations, but based on the Pass/Fail examples, it wouldn't do what I want, because all the Fail results were way too easy to see for me to consider a border necessary.
Nathan Sokalski 4,111 Reputation points

2022-07-20T00:17:11.763+00:00

I think one other thing that is making my scenario different from the ones on the sites I found is that I am working with solid shapes, while the sites & articles talk about text.
Viorel 122.7K Reputation points

2022-07-20T16:27:56.3+00:00

Instead of Contrast & Oposite Colors, probably you should search for "Color Difference" that takes into account how colors are perceived. There are several formulae ("Delta E). You can compare the shape's color with background and with other shapes.

Answer 1

Bruce (SqlWork.com) 78,236 Volunteer Moderator

The solution is both simple and not simple.

The standard approach is to calculate the border path. Then walk the border checking each pixel (or sample) to see it contrast is required. You may want a minimum length of path failure to determine if the border is required.

This very similar to a fill, but checking just the border.

Nathan Sokalski 4,111 Reputation points

2022-07-20T01:39:44.43+00:00

I have no idea what you are talking about! I know the colors, so there is no need to "walk the border". You say "see if contrast is required", that is what I do not know how to do.

Share via

Contrast & Opposite Colors

1 answer

Your answer