Fix contrast errors on primary call-to-action buttons

The primary button says Get a quote in white on a pale brand fill. On a calibrated monitor it looks on-brand. On a phone in daylight the label disappears.

Sales reports bounce before the form. Buyers never found the control they were asked to press.

This post is how to find and fix that contrast. It is not a test of the words on the button.

Measure the label against the fill

Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 between text and its background. That background is the button fill, not the white page behind the button.

A brand chip that passes 4.5:1 on white can still fail once you put white type on that same chip. The pair that matters is label versus fill. Understanding Contrast (Minimum) is the source for the ratio, the large-text exception, and what is exempt.

Most primary buttons use 16 pixel type, even when the weight is bold. That is regular text, so 4.5:1 applies. The 3:1 large-text bar starts at 24 pixels, or about 18.5 pixels when the type is bold.

Do not round a 4.499:1 sample into a pass. WCAG treats 4.5:1 as a threshold, not a number you pad. Sample the computed colors from the stylesheet, not a screenshot that anti-aliasing has already lightened.

The logo exception does not save this control. WCAG exempts text that is part of a logo or brand name.

It does not exempt the rest of the brand book. A Get a quote fill is a user interface control, not a logotype.

Inactive controls are also exempt. A disabled submit that waits on required fields does not have to meet 1.4.3.

A live primary button that looks washed-out because the brand is pale is not inactive. Style the live state to pass.

These are the failures that show up on B2B headers and heroes. Each one is a pair you can measure, not a taste debate.

• White label on a pastel brand fill that only passed when sampled on the page.
• Grey label on white, used as the primary action because the brand fill felt loud.
• An image-of-text button exported from a slide, with no way to restyle the pair.
• Placeholder copy inside the button treated as the label, then ignored in the audit.
• A Choose plan control that still fails after a pricing table overflow fix.

Check the states people actually use

Contrast has to hold when someone hovers, tabs, or lands the button on a photo. WCAG 1.4.3 applies to hover text and to text shown on focus, not only to the default swatch in Figma.

Hover and focus

A hover that lightens the fill often drops a passing 4.6:1 label into a fail. Keep the label readable in the hover fill, or darken the fill on hover instead of bleaching it.

Focus is a different pair. Understanding Non-text Contrast requires a 3:1 ratio for visual information that identifies a control and its states, against adjacent color.

If you draw a focus ring, that ring must contrast with the surface it sits on. A pale yellow outline on white fails 3:1 even when the label inside the button still passes 4.5:1.

Do not rely on a fill-color change alone to show focus. Hue shift without a luminance change also fails Use of Color.

Hover effects you add on top of a native button are supplemental. They do not have to contrast 3:1 as a hover badge. They must not make the control or its focus mark drop below the ratios above.

Ghost buttons and hero overlays

A transparent primary with a 1-pixel brand border is two checks. The label still needs 4.5:1 against whatever shows through the button, including a busy hero image. The border, if it is the only way to see that a control is there, needs 3:1 against adjacent color.

If the label is already visible, WCAG does not require a hit-area outline. Low-vision buyers still miss a faint ghost on a photograph. Prefer a solid fill that passes 4.5:1 over a see-through primary that only works on a studio background.

Putting Get a quote as a raster on the hero is an image of text. It still has to meet 1.4.3, and you cannot restyle it when the photo changes. Use real text on a fill you control.

Fix the pair, then re-check adjacent color

Darken the fill or darken the label until the default state clears 4.5:1. Then repeat the measure on hover and on the actual page background, including dark sections and photos.

If the control is only findable because of a border or icon, run the 3:1 non-text check against adjacent color. A filled button whose text already identifies it can skip a decorative border. It cannot skip a visible focus mark.

Do not use color alone as the instruction. Copy that says press the green button fails people who do not see that green. The label itself has to name the action.

This is not a conversion rate optimization (CRO) experiment on button copy. Changing Get a quote to Talk to sales while the fill still fails 4.5:1 leaves the same leak. Fix contrast first.

Unlike a full design and user experience engagement, this post covers only contrast on the primary action. For a look at whether Get a quote is actually readable on the live header, start with Get Free Assessment.