HubSpot drops orange: how accessibility reshaped the CRM's design

The new HubSpot theme isn't just a restyling. Behind it sits a rebuilt design system — and a decision that comes down to WCAG.

As of 31 August 2026, HubSpot has a new interface. And the orange buttons are gone. For many users that was the hardest part to accept: orange was HubSpot. The reason behind the decision, though, is more interesting than the decision itself — that colour didn't meet WCAG contrast requirements. It's a sign of something deeper. HubSpot is changing how people interact with the product, and to do that it had to rebuild the platform's visual foundations. Accessibility is one of the reasons, stated openly by the company.

Where the change comes from

The starting point is an observation HubSpot makes about itself: for years, software demanded something from users before giving anything back. You had to learn the tool, work out where to go and how to get things done. The burden of getting value out of the product sat with the person using it.

The stated goal is to reverse that relationship: a product that surfaces what matters without you having to go looking for it, with AI built into the workflow rather than bolted on as a separate feature.

The plan runs in two stages:

  • Stage 1 — the visual refresh, already live. A lighter feel, cleaner typography, more deliberate spacing, and lighter headers so the content itself takes centre stage.

  • Stage 2 — the redesign of how the product works, rolling out gradually over the next six months.

So the refresh isn't a restyling for its own sake: it's the foundation everything else will sit on. HubSpot chose to introduce it first and gradually, so that the full redesign feels familiar rather than jarring when it arrives. And this is exactly where accessibility comes in.

What's changing and when

  • 30 June 2026 — optional public beta

  • 31 August 2026 — automatic rollout to all users

Changing: colours, typography, border radii, icons, spacing, elevation and motion.
Not changing: navigation, structure, workflow and reporting logic. There's nothing to relearn.

Why change the colours and interface at all?

HubSpot's answer is technical before it is aesthetic.

The platform's design system hadn't been updated in almost a decade. In that time the product grew to hundreds of apps, each with slightly different components, colours and interaction patterns. It's why a dropdown in one app behaved differently from the same dropdown in another — and why dark mode never arrived.

Over the past two years the company rebuilt the entire system from the ground up, standardising filters, tables, modals and every other building block. The new theme is the visual expression of that system.

And according to HubSpot, completing this migration is the precondition for shipping three things: dark mode, an expanded set of themes, and full product accessibility.

That's the part worth pausing on. Accessibility wasn't treated as a feature to add later, but as something that required rebuilding the visual infrastructure. When you have hundreds of components each behaving in its own way, there's no realistic path to making them accessible one by one.

The orange case

Here comes the most significant decision — and the one users pushed back on hardest.

Orange was HubSpot's signature colour on primary action buttons. In the new theme it's gone. The reason, as stated by the company: orange on white doesn't meet the minimum contrast required by WCAG 2.1 level AA, making it hard to read for people with visual impairments.

HubSpot tried darkening it. But to push orange dark enough to pass, the colour turns brown and loses what makes it orange in the first place. Hence the decision to remove it from primary actions, with the possibility of bringing it back through alternative themes later.

It's a decision worth looking at closely: a company with enormous brand recognition accepted giving up its signature colour on a central interface element, because it failed an accessibility requirement.

The tension between brand identity and compliance is real, and it's usually resolved the other way — keeping the colour and deferring the problem. Here it went differently.

The redesign concerns HubSpot's interface, not the content you publish with HubSpot.

  • The backend — what you see working inside the CRM — benefits from the update.

  • The frontend — website, landing pages, emails and forms you build with HubSpot and that reach your users — stays exactly as accessible as you've made it.

An updated theme in the CRM doesn't make a landing page compliant if it has insufficient contrast, a form without associated labels, or an image with no alt text. And those are precisely the pages that fall within the scope of the European Accessibility Act.

Accessibility has entered standard business practice

One thing is worth noting: across all of HubSpot's communication, accessibility never appears as a regulatory obligation. There's no mention of penalties, deadlines or requirements. It appears as part of a product decision — alongside dark mode, customisable themes and component consistency.

That's a sign of maturity. Accessibility is moving out of the compliance box and into the quality-of-experience box, where it always belonged.

And the orange case demonstrates it better than any statement of principle: insufficient contrast doesn't only penalise people with a visual impairment. It penalises anyone working in bright sunlight, anyone on a cheap monitor, anyone looking at the interface at the end of a long day. Making a button legible improves the experience for everyone, not for a minority.

When accessibility is designed in this way — as a constraint that raises overall quality, rather than a box to tick — it stops being a cost and becomes what it always was: good design.

Check your website's accessibility for free with Eye-Able®!

Filter

Filter op categorie

Bevestig je selectie met de knop aan het einde van de lijst na het kiezen van de categorieën.

Filters resetten
Vier collega’s met verschillende achtergronden kijken samen glimlachend naar een laptop. Op de achtergrond staan pictogrammen van een weegschaal en een webinterface, wat samenwerking rond digitale toegankelijkheid, content en wettelijke naleving visualiseert.

Wet Digitale Toegankelijkheid (EAA): zo krijg je de hele organisatie mee!

Lees verhaal
Illustratie van een document met een checklist en selectievakjes, voorzien van een EAA-badge en een pictogram van een weegschaal. De afbeelding staat voor wettelijke eisen en controlepunten rondom de European Accessibility Act en digitale toegankelijkheid.

Welke subsidies zijn er voor de Wet Digitale Toegankelijkheid (EAA)?

Lees verhaal
Illustratie van een weegschaal bovenop een stapel wetboeken en een opgerold document. Links staat een vergrootglas met een juridisch paragraafteken. De afbeelding symboliseert wetgeving, juridische toetsing en naleving van regels.

Hoe hoog zijn de boetes Wet Digitale Toegankelijkheid (EAA)?

Lees verhaal
Illustratie van een juridisch document met de EU-vlag op een clipboard. Op de voorgrond staat een rechtershamer en rechts een blauw schild met de tekst “EAA”, als symbool voor de European Accessibility Act en wettelijke verplichtingen rondom digitale toegankelijkheid.

Wie controleert de European Accessibility Act (EAA)?

Lees verhaal
Websitegrafiek met stijgende balken die groei door toegankelijkheid symboliseren

Wat kost het om jouw website aan de European Accessibility Act (EAA) te laten voldoen?

Lees verhaal
Blauw Eye-Able-embleem met de letters EAA op een lichte achtergrond

Waarom een nieuwe wetgeving Digitale Toegankelijkheid (EAA)?

Lees verhaal
Man met bril en gestreept shirt die een laptop gebruikt. Naast hem staat een illustratie van een checklist op een clipboard met vinkjes en het universele toegankelijkheidssymbool, wat het controleren van digitale toegankelijkheid en naleving van richtlijnen visualiseert.

Checklist! Voldoet jouw website aan de Wet Digitale Toegankelijkheid (EAA)?

Lees verhaal
Es ist eine Straßensperrung zu sehen, welche eine Straße Richtung Strand blockiert. Auf der Sperrung hängt ein Schild, auf dem "Straße gesperrt" auf englisch steht. Im Hintergrund sind Sanddünen und blauer Himmel zu sehen.

Digitale toegankelijkheid en barrières herkennen: de meest voorkomende obstakels in het dagelijks leven

Lees verhaal
Mensch sitzt vor einem Laptop und fasst sich verzweifelt an die Stirn.

Onzichtbare barrières in het dagelijks leven en waar je ze vindt

Lees verhaal
Person looking concerned on the screen of a computer.

Digitale formulieren en toegankelijkheid

Lees verhaal
Hot air balloon from the inside.

Wat is kleurenblind en hoe Eye-Able digitale toegankelijkheid voor iedereen verbeterd

Lees verhaal

You need more information?

Contact us and we will be happy to help you.

a man with down syndrome shows a woman something on the computer. they both laugh