3

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.

enter image description here

enter image description here

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? :)

enter image description here

1
  • 2
    Don't forget that some people are red/green colorblind, and they're not going to be able to tell what you're doing at all. It'll be a big undifferentiated gray mass. Feb 25, 2014 at 1:41

2 Answers 2

5

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?

enter image description here

enter image description here

2
  • You are right. I'm getting back score : i.imgur.com/WhiwF3W.png You have idea how I can have a better score? I prefer not to go for "rectangle block" way yet. Feb 26, 2014 at 14:41
  • @CheokYanCheng Then your best bet is to go darker (for light background). Maybe you could use an icon next to the number too, for example a + or - sign with round background.
    – Yisela
    Feb 26, 2014 at 19:19
3

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.

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.