Systemetic way to choose a good red & green color for dark grey background

Question

I'm don't have any Graphic Design background. I'm a programmer.

Recently, I tried to port my holo light themed app, to holo dark themed app.

For holo dark themed, the dark grey background being use is coded

#ff4c4c4c

I realize, under dark grey background, it is difficult to make "shinning" (Sorry. I don't know the exact word. "shinning" means for instance, #ffff0000) green & red character to be read.

After several try-n-error, I manage to discover 2 color codes :

#ffdb3344 - red
#ff6baa7f - green

Both color I found that

1. Easy to read
2. Pastel style, which gives Elegant, Harmony, Comfortable feeling.

Yet. The color (especially red) might look nice under my device, but they might not so easy to read in other devices with other display quality.

I was wondering,

1. Is there any red & green, which is suitable to be placed in grey background #ff4c4c4c, has greater tolerance to look "nice" (Easy to read, Pastel style, which gives Elegant, Harmony, Comfortable feeling) under variety of display quality?

2. Is there any systematic way to choose such color, instead of try-n-error?

Update

By using wonderful tool http://leaverou.github.io/contrast-ratio/ introduced by @Yisela, I was able to produce something like the following (By try-n-error method). It looks better right? :)

Answer 1

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: http://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?

Answer 2

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.