You might pick three lovely colors that, on their own, look great together: light lavender, a soft coral button, and a warm gray text color. They all look elegant side by side in a row of color swatches, but when you place these colors together in your actual layout, things go off the rails. Your heading isn’t prominent, the wording on your button can barely be seen, and your page looks washed out. You aren’t doing anything wrong if you love these colors, but your colors just aren’t providing enough contrast.
It may seem that your colors are working together perfectly. The problem isn’t always obvious when looking at the colors, but text contrast relies on something specific called value. Values are how light or dark a color is, regardless of its color family. You could have a light blue and a light pink, both with distinct differences in hue but similar values, and both would struggle with the readability of white text, even though blue and pink can feel so very different to us.
This is why you try again and again, changing colors from pastel blue to soft green, light peach to lavender, but you still can’t find a color to make the text legible. The issue isn’t the colors themselves; the issue is the lack of contrast in value between the text color and the background color.
Take a few moments to try this quick test: choose a few background colors from your palette and add one sentence to each one. Keep your font size and font color the same, but just swap out the background color. Then, duplicate your test layout and view it in grayscale (or use the grayscale feature of the design software you are using). If the sentence nearly disappears when viewing it in grayscale with one particular background color, you’ll need to make a bigger value change before using that particular color on your page. Either lighten the background color (or darkening the text color, or even choosing a different color entirely, if it is a section color).
Also consider that highly saturated colors aren’t always the best for readability. A bright yellow may make your page look bold, and it may be hard to read white text over a bright yellow background. You would likely need the white text to be much bigger, to be readable over such a light, highly saturated yellow. On the other hand, a saturated green (with low saturation) may not look as bold on the page, but it would be much easier to read with white text. Brightness does not always equal readability. Always test your actual size of text when designing the size of text that will be displayed over it. A large color swatch on your palette may not provide good enough contrast if you need that color to hold small words like “apply” or “save.”
Text contrast is particularly important for smaller elements: your body copy, captions, form labels, and text on buttons or in menus. These are elements that provide information. You don’t want a background color to be a delicate shade just so it can provide contrast for small text elements. You could try a muted color for a background color or border color that isn’t used for text, or a color that only appears as an element of the page. If you are unsure of how readable your color is, choose a more neutral dark color over white or a neutral light gray over a dark gray for a background color. Your color can still appear as accents around your text, but the text color is your safest choice for legibility.
A final way to think about your colors when you create your palette is to separate out your palette by testing and decoration. Determine which colors you are going to have text on and colors you aren’t going to have text on. It is much easier to determine which colors to put on text and what to put on backgrounds, highlights, icons, or other small accents than it is to determine which swatch to use when everything can potentially be used for anything. You can make your pale tint your card background, your saturated accent your small badge and your darkest neutral your safest, easiest to read color when you have a larger amount of text. You want to give every swatch a role.
When the colors on a page look beautiful, yet you still cannot read your text easily, you don’t always have to throw your color palette out and start over. Look more closely and check if your colors don’t have enough contrast. Change them in grayscale or change the actual size of your text. Maybe you just need to pick a darker shade or a lighter neutral to serve as the color of your text, and your background colors are already the colors you love. Color contrast may just require a few simple tweaks rather than a whole new selection of colors.