Which Colour Contrast Ratios Actually Matter on a B2B Site?

Is colour contrast a compliance problem or a conversion problem?

Both, and the compliance numbers are the only part anyone has written down. The W3C publishes exact ratios for text and interface elements, which gives you a defensible floor. Whether your page also feels comfortable to read is a separate judgement, and the floor is where that judgement should start rather than end.

I keep finding the same pattern on otherwise well-designed B2B sites. The typography is considered, the layout is clean, and the body text is a pale grey on white that fails the published minimum by a wide margin. Nobody chose that outcome. It arrived through a brand palette that was never checked.

So here are the actual numbers, where they apply, and which parts of a site fail them most often.

What is the minimum contrast for body text?

A ratio of at least 4.5 to 1. The W3C's guidance on success criterion 1.4.3, Contrast (Minimum), is a Level AA requirement stating that the visual presentation of text and images of text has a contrast ratio of at least 4.5 to 1, with an exception for large text which needs at least 3 to 1.

That single number resolves most arguments about body copy. Pale grey body text on a white background is the most common failure I see, and it is usually defended as looking softer or more modern. It does look softer. It is also below the published floor, and that floor exists precisely because the softer version excludes people.

The exceptions are narrow and worth knowing so you do not over-apply the rule. The W3C lists inactive user interface components, pure decoration, invisible text, logos, and incidental text in pictures containing significant other visual content as having no contrast requirement. Your logo does not have to pass. Your paragraph text does.

What actually counts as large text?

Less large than most people assume. The W3C defines it as at least 18 point, or 14 point bold, or a size that yields an equivalent for Chinese, Japanese and Korean fonts. It also gives pixel equivalents, noting that 14 point and 18 point are approximately 18.5 pixels and 24 pixels.

The conversion it uses is one point to 1.333 pixels. Those pixel numbers are the useful part, because you are almost certainly working in pixels. A 24 pixel heading qualifies for the relaxed 3 to 1 ratio. An 18 pixel subheading does not, unless it is bold, in which case 18.5 pixels is the line. A lot of design systems sit uncomfortably close to that boundary without anyone having noticed.

For images of text the W3C offers a different guide, advising that authors ensure the text in the resulting image is roughly equivalent to 1.2 and 1.5 em, or to 120 percent and 150 percent of the default body text size. If you ship text inside images, that is your reference rather than the point sizes.

Do buttons and form fields have their own requirement?

Yes, and this is the criterion most teams have never read. Success criterion 1.4.11, Non-text Contrast, is also Level AA and requires a contrast ratio of at least 3 to 1 against adjacent colours for the visual presentation of user interface components.

It covers more than buttons. The W3C extends it to graphical objects, specifically parts of graphics required to understand the content, except where a particular presentation of graphics is essential to the information being conveyed. A chart whose meaning depends on distinguishing two colours falls inside this, not outside it.

The practical consequence is that a form field with a very light border fails even when its label passes. So does a button whose background sits too close to the section behind it, and a focus indicator visible only to people who already knew where it was. The W3C is explicit that the criterion does not apply to inactive user interface components, which is the one place you get some latitude.

Which parts of a B2B site fail most often?

Four places, in my experience. Pale grey body text, placeholder text inside form fields, disabled-looking secondary buttons that are not actually disabled, and thin form borders. Three of those four are interface problems rather than typography problems, which is why a text-only contrast check misses them.

Placeholder text deserves particular attention, because it fails twice. It is usually the lowest contrast text on the page, and it disappears the moment somebody starts typing, taking the field's meaning with it. That is a large part of why visible labels beat placeholders regardless of what the contrast checker says.

Secondary buttons are the sneakiest failure. A design system will often style them as a muted version of the primary button, which reads to a user as unavailable and reads to a contrast checker as a failure. If an element is clickable, it needs to look clickable and it needs to clear 3 to 1 against what is behind it.

Does the threshold round in your favour?

No, and the W3C says so explicitly. Its guidance states that the 3 to 1 contrast ratios referenced in the criterion are intended to be treated as threshold values, and that computed values should not be rounded, giving the example that 2.999 to 1 would not meet the 3 to 1 threshold.

I mention this because the argument comes up in every design review. Somebody has a colour at 2.98 and would like it to count. It does not count, the specification anticipated the question, and the honest answer is to change the colour rather than the interpretation.

In practice this saves time rather than costing it. A rule with a hard edge ends the discussion, and the alternative is relitigating your palette every time somebody designs a new component. Pick colours that clear the threshold with room to spare and the question stops arising.

How does this change your brand palette?

It usually means your brand colour cannot be your text colour, and often cannot be your button background either. That is not a compromise of the brand, it is a recognition that a palette has different jobs, and the colour that works on a poster does not necessarily work behind twelve point type.

The workable approach is to derive rather than to restrict. Keep the brand colour for large surfaces, accents and graphics, and derive a darker variant for text and a lighter one for backgrounds. You end up with a family rather than a single value, and every member of the family has a defined job and a known ratio.

Do this once, at the token level, and every component inherits it. Doing it per component is how sites end up with nine slightly different greys, three of which fail. If you are already working with variables, this is the natural place for that structure, and it pairs with the same system you would use to set up dark mode with Webflow variables.

What about dark mode?

It needs checking separately and it usually fails in different places. Contrast is a relationship between two colours, so inverting the scheme does not preserve your ratios. A grey that passed against white will not necessarily pass against a dark background, and pure white text on pure black creates its own readability problems.

The failure mode flips too. In light mode things are usually too pale. In dark mode the common problem is borders and dividers disappearing entirely, because a subtle border that was visible against white becomes invisible against near-black. Your 3 to 1 interface requirement applies just as much there.

Test both modes as separate designs rather than assuming one derives from the other. Two palettes, two sets of checks. It is more work, and it is the only way to know, because the maths genuinely does not carry across.

What should you do next?

Check three specific things on your own site before anything else. Your body text ratio, your form field borders, and your secondary buttons. Those three cover most real failures and they take a few minutes each with any contrast checker.

Then write the passing values into your design tokens rather than into a document. A rule that lives in a style guide gets forgotten, and a rule that lives in a variable gets inherited by every component anybody builds afterwards. That is the difference between fixing it and keeping it fixed.

Finally, remember that clearing the floor is not the same as being readable. The ratios are a minimum, and a page can pass every check and still be tiring, which is a layout and typography question I have written about in designing a B2B page for someone who will not read it. If you want a second pair of eyes on a palette before you commit it to a build, reach out.