Fixing Low-Contrast Text: WCAG Ratios, Brand Colors and Practical Adjustments

WCAG, the Web Content Accessibility Guidelines, defines contrast as a ratio between the relative luminance of two colors, from 1 to 1 for identical colors up to 21 to 1 for black on white. Relative luminance is computed from the color's red, green and blue values after correcting for how the eye perceives brightness. You do not need to calculate it by hand, but you should know the thresholds.

• ▸Normal text: at least 4.5 to 1 for level AA, and 7 to 1 for level AAA.
• ▸Large text, which means at least 24 pixels or 18.66 pixels bold: at least 3 to 1 for AA and 4.5 to 1 for AAA.
• ▸User interface components and graphical objects, such as input borders, icons and chart lines needed to understand content: at least 3 to 1 against adjacent colors.
• ▸Text inside disabled controls and purely decorative text is exempt, and so are logos.
• ▸Meeting AA is the usual legal and policy target. Many accessibility laws point to it.

Bright orange, yellow, light blue and light green are attractive but have high luminance, so they lack contrast against white. The same colors work well as backgrounds with dark text on top. A mid tone, such as a medium blue, may pass against white but fail against black, which matters for dark mode. Always test both pairings.

Keep the hue and change the lightness. This preserves the brand feel.

• ▸Convert the color to HSL. The Color Converter on this site shows the HSL values and the contrast ratio against white and black.
• ▸To pass on a white background, reduce the lightness in steps of 3 to 5 points until the ratio reaches 4.5 to 1.
• ▸To pass on a dark background, increase the lightness instead.
• ▸Keep the original bright color for large shapes, backgrounds and accents, and use a darker variant for small text and links.
• ▸Define a pair of tokens for each brand color, one for fills and one for text, so designers do not have to decide each time.

• ▸Placeholder text and hint text are often too light. They still need to be readable.
• ▸Text over images and gradients has changing contrast. Add a solid or semi transparent backing layer behind the text, and test the worst area.
• ▸Semi transparent colors depend on what is behind them. Check the final blended color, not the declared one.
• ▸Links inside body text that differ from surrounding text only by color need at least 3 to 1 between link and text colors, and should also have another cue such as an underline.
• ▸State changes such as hover, focus, selected and error must also keep contrast, and should not rely on color alone. Add an icon, text or a shape change.
• ▸Dark mode needs its own check. A palette that passes in light mode can fail when inverted.

Check contrast when you choose the palette, not after the page is built. Document approved text and background pairs in your design tokens. Add automated checks to your testing, since tools can flag many failures, but remember that automated checks cannot judge gradients or images, so do a manual pass on those. Finally, look at your site on a phone outdoors or with the screen brightness lowered. If you struggle, others will too.