: Systemetic way to choose a good red & green color for dark grey background I'm don't have any Graphic Design background. I'm a programmer. Recently, I tried to port my holo light themed app,

@Murray976

I'm actually working with (disturbingly) similar backgrounds, and it took me a good amount of time to find values that worked with both. I did it manually, to be honest. There are more or less automated ways to pick colors, but they won't guarantee the colors actually work aesthetically. There are also ways to check the ones you have chosen have enough contrast. I personally use this online tool: leaverou.github.io/contrast-ratio/
Now, it's one thing to use colors for blocks / elements, and a completely different one to use them for text. Text is thin, it has a small surface so it's trickier to chose a color that is easy to read. If you do a contrast check for your grey theme using that tool I mentioned, your scores will probably be very low. It's not too bad in the first case (light), but you can tell there might be an issue with readability in the second (dark).

So, pastel colors will always be a challenge. Why don't you try with something like this, where the surface to cover is the color, and the number is in white / black depending on the skin?

Vote Up Vote Down

@Phylliss782

The key in these circumstances is the "value", ie the light/dark level. You want colors that have sufficient separation in value. I strive for 50% difference or better for anything that should be easily read. For reference, in grey tones that's #808080 text on an #fff ground.

You can check a given color's value by plugging it into a tool that allows you to see the HSB breakdown. Value is represented in percent form by the 'B' or 'brightness' channel.

Vote Up Vote Down