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