Link to home
Start Free TrialLog in
Avatar of oaktrees
oaktrees

asked on

Need Five Good Contrasting Colors for 212934

What would be 5 REALLY GOOD contrasting colors for a dark background.

212934

Good in contrast & readability.

Somehow I was hoping there was a web tool that one could put in a background color, and a range of suitable contrasting colors would get generated.

Couldn't find anything for a SINGLE color as a starting point.

So, for the color

212934

if you can offer a solid set of 5 colors with great contrast and readability, that's what I need.

If there's a formula for that, please share.

If there's a tool where one can enter a background color and a range of text colors is generated even better!

Sincerely,

OT
Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

The best way is to compare, you can use this tool to get contrast ratio by comparing 2 colors and you can see the result
https://contrast-ratio.com/#white-on-%23212934
https://contrast-ratio.com/#yello-on-%23212934

as long that the result is the green circle this mean it is good, yellow not so good and red not good)

You can use online tool to get color info and gradient
https://www.color-hex.com/color/212934

or pallette
https://color.adobe.com/create
https://colorhunt.co/
https://www.color-hex.com/color-palettes/
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of oaktrees
oaktrees

ASKER

Hi Len & Scott!

That's what I'm getting at.  White, out of the box, is an obvious choice.  

But, if there are elements in a document that need different "valences" then you'd want a RANGE of nice contrasting colors.

Let me illustrate.  

Using the tool that Len suggested we can see that against a dark background black and red are poor choices.  
Black getting a red stop sign:
https://contrast-ratio.com/#black-on-%23212617 
SCORE / RELATIVE LUMINANCE
1.35 / 0.017714213392336274

And red not much better:
https://contrast-ratio.com/#red-on-%23212617 
3.87 / 0.017714213392336274

Yellow, on the other hand, is quite perfect.
https://contrast-ratio.com/#yellow-on-%23212934 
13.66 / 0.02157142662212875

Now, with there being about a BILLION colors between black and yellow, and maybe another billion more beyond yellow, I was hoping there'd be a calculator which would generate a list of all the Green Light colors against any selected background.

Surely it's a formula, as https://contrast-ratio.com/#purple-on-%23212934 shows us.  It pops up with a red "Stop" indicator right out of the gate.

Here's my thinking:  
Rather than having to, one by one, enter and test each color that springs to mind to test it against any background - was hoping there'd be a way just to generate the entire list of them that are Green Light for any potential background color.

Now, for those with graphic arts training, there's an intuitive sense to this.  They've been lucky enough to have enough experience to know what will look good.  Less need for them to even have to check.

But, even for them, there's clearly a science to it, as this posts illustrates > https://blog.prototypr.io/how-to-design-a-dark-theme-for-your-android-app-3daeb264637 

Where phrases like "Primary Color Tonal Value 500" can be found. https://miro.medium.com/max/2800/1*OkhjA8Qatt25nOO34wu0Ow.jpeg 

So, hoping for a tool that...knows what these guys know.

What I did so far was to simply google image search: dark theme text color > https://www.google.com/search?as_st=y&tbm=isch&as_q=dark+theme+text+color

Got to this: https://miro.medium.com/max/3600/1*upuJdnV8UARih0feJbEteA.png

Now, surely these are useful, but, would love to be able to see ALL the colors that, scientifically / via-vormula, would work.

Sincerely,

OT
I am not sure what else you are after. The Adobe tool is a great resource for picking out color blocking options. I use it myself. Then the tool I suggested takes a background color and generates multiple options for you and allows you to filter for multiple options.  However, this type of choice goes beyond the math of what colors will contrast. Take yellow on very dark colors for instance. Yes, they contrast but certain shades and font sizes can be hard on the eyes. What about combinations that are hard for color blind?

If you are interested in diving into the formulas these tools use, the contrast-ratio tool has an MIT license and you can grab the code https://github.com/LeaVerou/contrast-ratio.. If you go to the tool I suggested and view the source, you can find the js file that is used to generate the output. W3C has good information as well https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html 

Finally, beyond all the science is the art factor. Colors have meaning, colors can also be fashionable. What is trendy today vs 1970? or did you want your look to be like 1970?


Hi Scott,
You're right! http://colorsafe.co/ is what I need.
You wrote: "The Adobe tool is a great resource for picking out color blocking options."  Seems like there's a steep learning curve to that one.  Know of any good intros / videos?
Thanks again!
OT

GREAT resources!  Thanks!
For adobe, try the Explore feature.  I didn't use your number, just "dark gray" https://color.adobe.com/search?q=dark%20gray You can see some options that others have used. Clicking one example one gives a little more detail.

You can look at trends https://color.adobe.com/trends/Graphic-design There is one with a dark gray, off white, tans and a blue that looks good.

On the create side, https://color.adobe.com/create, you can enter in your color number on the left most box. Then I like to use either complimentary or triad. I only use those as suggestions and adapt to my own liking. 
Here is another tools that I use for accessibility project

Good constrasts, for web accessibility between two colors
https://contrast-finder.tanaguru.com/