Choose foreground color with high contrast

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%?

Welcome to the community @Melissa!
You may need to adjust the white to have a higher contrast ratio. Or do you really need the green? Accessibility isn’t just about colors, so test for readability as well as color contrast.