Lift icon contrast where the mark sits on a tinted bubble

Fixkamo-marketing
Shipped
August 15, 2026 at 4:21 PM UTC
Author
Kamo
Commit
03c25e5

The reported case is the brand green on a tint of itself: --color-primary against rgba(107,142,58,0.15) is 3.43:1. That clears the 3:1 WCAG 1.4.11 floor for graphics, so it is not a failure, but the hue is identical to the bubble — lightness is the only separation, and the icon reads as nearly the same colour as the plate behind it. Same story on the low-alpha white bubbles: 3.62–3.83:1. Adds --color-icon-on-tint (one step up the existing ramp, to --color-primary-lighter) and applies it to the 21 icons that sit inside a tinted bubble, across about, contact, features, security, demo, careers, community, blog, kb, subscribe, CTAStrip, UseCases and the cookie banner. Every one of those bubbles now measures 5.3:1 or better. Icons NOT on a tint keep --color-primary — there the green already clears 4.5:1 against the page and against a plain card, and recolouring them would drain brand colour from the site for no accessibility gain. Also lightens the ROI calculator's Clock icon: at #7B68EE it was 3.49:1 while the two icons beside it were 4.77:1, so it now matches them at 5.34:1. Audited by compositing each bubble over the card and page background and measuring WCAG ratios rather than by eye. Weakest icon-on-bubble pairing across the site goes from 3.43:1 to 4.30:1, and that one is a deliberately muted grey.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing