Choose foreground color with high contrast

Feedback & Problem Solving
,
#1

I’ve designed some utility colors (green: #43A047, yellow: #FDD835, red: #E53935, blue: #2774AE). Additionally, I use two foreground colors: black with 87% opacity and white with 87% opacity.

It is clear, that I should use black 87% on the yellow backgrounds and white 87% on the red and the blue backgrounds.

But green is a little bit special:

  • Contrast ratio of #43A047 with white 87% is 2.86
  • Contrast ratio of #43A047 with black 87% is 5.66
    Means, I should choose black 87%. But for my eyes, readability is better with white 87%.

So which one should I choose for #43A047, white 87% or black 87%?

#3

Hi Melissa, I had a research about background and contrast topics. I found a free color contrast checker tool [Color Contrast Checker - TPGi].This tool can help you to see differences and ratios.