Wednesday, September 6, 2017

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, 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




Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...