How do you create both sufficient contrast and a harmonious outcome for text on different tints of the same color?

Question

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?

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.}

---

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.

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.

Trick #2

Text Effects

Outline or drop shadow:

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.