Here are two examples. One is a table, the other an illustration. Both use different tints of the same color with text on top. How do you change the color of the text across these tints to be both harmonious as well as having enough contrast to the background?

tinted table tinted circles

1 Answer 1


Note: The question is based on an error, in the examples –Both use different tints of the same color–, this is not right, in both cases, there are different HSB values to achieve brighter steps. When blending a color to white, the intermediate steps are never as saturated, in fact, they lose saturation as they get closer to white.

real colors

I personally think that the contrast, no matter how small, always implies a change. If all the text belongs to the same information, I try not to change its color, either by hue contrast, brightness, or saturation. There are some tricks.

But first, when the question is about colour, contrast, and/or combinations, it's always preferable to avoid working from the color itself. The color is an element with its own information and different in each of them that can lead to confusion. There's no generic answer to contrast, it depends on each color, but guidelines can be established from a grayscale + black and white as a starting point. Once the grayscale contrast is achieved, apply the same method in color.

This is a 10 steps grayscale plus black and white. The text is 50% black. Since the scale is not ten but twelve steps, there is no background color matching the color of the text. Likewise, the highest visually conflicting contrast is in steps 6 and 7.

enter image description here

Trick #1

Make a scale with more steps than the final graphic and get one of the unused bakground steps as text color

In the image below, removing backgrounds 6 and 7 we get adequate contrast on a scale of ten steps and a better one removing steps 5, 6, 7 and 8 for a final correct 8 steps scale. In case of needing more steps, the larger the original scale should be.

enter image description here

Trick #2

Text Effects

Outline or drop shadow:

enter image description here

Trick #3

If possible, modifying a background is always preferable to applying different colors to the same text

The second image in the question, while not a scale belongings to the same color, is using one of these forbidden backgrounds. A slight change in the saturation of that background allows the same text color to be used in all steps with exactly the same final effect.

enter image description here

  • On the right, the lightest background with white text is still grossly insufficient. "Trick #1" is also insufficient. And #888 is not 50% black, it's about 24.6 Y (luminance), not that sRGB values are uniform to perception.
    – Myndex
    Aug 21, 2023 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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