ACCESSIBILITY · 20 OCTOBER 2026
How to Fix Brand Color Contrast Without Guessing
A worked WCAG example: measure a failing pair, adjust lightness, verify the rounded HEX and preserve the right brand decisions.
When a brand color fails contrast, “make it darker” is only the beginning. You need to know which pair fails, what ratio applies, which value changed and whether the final exported HEX still passes. This walkthrough makes each decision inspectable.
Start with a reproducible failure
Suppose a design uses #777777 for 16px body text on #FFFFFF. Its WCAG contrast ratio is 4.478089:1. Normal AA text needs at least 4.5:1, so this pair fails even though it looks close. Open this exact pair in the checker.
Do not use a rounded display value to decide compliance. The underlying luminance calculation must determine pass/fail. Do not call ordinary body copy “large” simply because it is prominent: the WCAG size definition still applies.
Decide what is allowed to change
If the background is fixed, vary the foreground. If a brand HEX must remain exact, consider using it for a larger decorative area and choosing a separate text token. Alternatively, change the surface. A successful repair should respect the design brief, not merely produce a green badge.
Adjust lightness, then verify the exported value
Choose AA normal text in Palunio and select Adjust lightness. For this example, the search returns #767676, measuring 4.542225:1. The algorithm tests discrete OKLCH lightness values in both directions, reduces chroma where required by sRGB, and measures the quantized output.
| Text | Background | Ratio | AA normal |
|---|---|---|---|
| #777777 | #FFFFFF | 4.478089:1 | Fail |
| #767676 | #FFFFFF | 4.542225:1 | Pass |
The search minimizes lightness movement within its tested candidates. It does not claim a globally minimal perceptual difference, and a change can affect brand character. Review the suggestion before using it as ink and surface. For a more demanding target, select AAA normal text and check again.
Some backgrounds cannot support your target
A medium-luminance background may fail a 7:1 target against both black and white. No foreground can exceed the better of those two endpoints under this formula. If the tool reports no solution, changing hue alone cannot solve the luminance constraint: change the background, reconsider the intended text level, or restructure the component.
Check the rest of the workflow
Apply the pair to your palette, open the website palette preview, and inspect actual roles. Check links, buttons, captions, hover states and error messages in the final application. A design may use the same brand color against several surfaces; each pair needs its own result.
Download the checker’s JSON report to retain the precise inputs and measurement. A report records that pair, not an accessibility certification. Keep a readable name and intended usage beside the token when handing it to another person.
Source and scope
This example follows W3C’s WCAG Contrast (Minimum) guidance. It covers opaque sRGB text pairs. See Palunio’s methods for rounding, gamut and repair details, and the broader accessible-palette workflow for what remains outside a pair check.