0

I am developing some kind of heatmap for a stock market-related project which has ~80 large to small boxes on the screen to denote a stock and it's change

I use a red background on box to denote loss, and green background to signifies gain. I use white text with a stroke to display some text on them.

Here is what I need now.

  1. I need to have special boxes which are also red and green, but I want them to have a different colour variation so they stand out as special.

  2. On these normal and special boxes, I also need to write some text in red and green variation to write more details.

How do I find good colour combinations to achieve my goal?

Note:**

  1. It doesn't have to be a strictly red/green combo. Other colours which signify loss/gain are also okay.

  2. It's a personal tool to be used by myself only.

enter image description here

2
  • 1
    Is there an specific reason for teh boxes to be red and green? As Danielillo says in his very good answer, it has a lot of problems. He mentions people with color blindness, but I don't suffer from color blindness and find very difficult to read anything at all in your image
    – Devin
    May 12 at 18:04
  • 1
    @Devin It's an internal tool to be used by myself only. So I picked red/green because these seemed obvious choices to me.
    – CodePanda
    May 12 at 18:59
2

~ 10% of the population with color blindness will see your dashboard like this:

enter image description here

Green and red combination with this exact hue, bright and saturation value will not work. This is the current current color palette and the correspondence with the two most popular type of color blindness:

enter image description here

In the case of an information board with division of cells according to type, I would think twice before making just a differentiation by color. There are other options, color is not the only contrast variable.

If the use of color is the final decision, here is a working method:

  1. Choose the two base colors, in this case: green and red.

  2. Choose two well-differentiated hues for any type of user, including the percentage with difficulties in color perception

enter image description here

  1. Keep the same hues and modify only the brightness (or saturation) from the HSB selector for the secondary options, in this way we make sure to maintain the same contrast all the time

enter image description here

1
  • I forgot to mention in my post that's an internal tool and supposed to use by only myself. Btw how do I deal with the coloured text I need to show inside it?
    – CodePanda
    May 12 at 19:04
1

Since this is for you, here's the way we do it in general. I'll explain it for all user cases, but you can apply it for your choice of color.

As Danielillo says, it's a good idea to choose a color combination that is easier to see. Even if it's for your own use, you'll find that you can use different tints and shades even within your desired palette.

So, first thing first: go to https://contrast-ratio.com/ and choose pure white for the text color. Now, in the background field choose a green that has enough contrast for you. Once you do this, try pure black text. If it works with both text colors, there you have your background color to start. You won't need to pass AA or AAA level since it's for your own use. After you have your green, do the same for red.

For example, instead of a dark green, you can move towards the turquoise green. Same goes for red: use a clear red as a base, and then build the other colors from there.

Now, here comes the part where you make the colors stand out or differ: with your basic background, add some black to it while using white font. For example, rgba(0,0,0,.15),or rgba(0,0,0,.25) or whichever value you like.

And then do the same for black text, only that this time you add some white to the background, like rgba(255,255,255,.15).

Keep in mind we do this for accessibility concerns in order to achieve WCAG 2.0 AAA level, so we start with a base color that already has AAA level. But since this is for your own use, you can play with the values until you get something you like

1

From a data vis viewpoint, I would actually do something different than a change to the colour saturation which as you've noticed from the screenshots isn't obvious to spot

Think about marking the border with a thick black or yellow outline, or using a texture within the box

Or even have the 'special' items in a separate but linked view shown as a simple list?

For the text, you can also see red on red or green on green isn't going to work. If you're absolutely committed to these colours you could put a neutral coloured rectangle as a background for those texts, but again I would think about using something else - what about position - already the 2nd text string is always 'red' info, and the 3rd text string is always 'green' info - prefix them with 'Loss' or 'Gain' or up and down carets or whatever red/green symbolise

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.