HubSpot kiest voor oranje: hoe toegankelijkheid het ontwerp van de CRM heeft veranderd.

Het nieuwe HubSpot-thema is niet zomaar een restyling. Er zit een volledig vernieuwd ontwerpsysteem achter – en een beslissing die uiteindelijk is genomen met WCAG.

Per 31 augustus 2026, HubSpot heeft een nieuwe interface. En de oranje knoppen zijn verdwenen. Voor veel gebruikers was dat het moeilijkst te accepteren: oranje was HubSpot. De reden achter de beslissing is echter interessanter dan de beslissing zelf. Die kleur voldeed niet aan de contrastvereisten van WCAG. Het is een teken van iets dieperliggends. HubSpot verandert de manier waarop mensen met het product omgaan, en daarvoor moest het de visuele basis van het platform opnieuw opbouwen. Toegankelijkheid is daar een van de redenen voor, zoals het bedrijf openlijk heeft verklaard.

Waar komt de verandering vandaan?

Het uitgangspunt is een observatie die HubSpot over zichzelf maakt: jarenlang eiste software iets van gebruikers voordat het iets teruggaf. Je moest de tool leren kennen, uitzoeken waar je moest zijn en hoe je dingen voor elkaar kreeg. De last om waarde uit het product te halen lag bij de gebruiker.

Het uitgesproken doel is om die relatie om te keren: een product dat toont wat belangrijk is zonder dat je ernaar hoeft te zoeken, met AI geïntegreerd in de workflow in plaats van als een aparte functie toegevoegd.

Het plan verloopt in twee fasen:

  • Fase 1 — de visuele vernieuwing , is al live. Een lichtere uitstraling, strakkere typografie, meer doordachte spatiëring en lichtere koppen, zodat de inhoud zelf centraal staat.

  • Fase 2 — het herontwerpen van de werking van het product , en wordt de komende zes maanden geleidelijk uitgerold.

De vernieuwing is dus geen simpele restyling: het vormt de basis waarop alles verder zal rusten. HubSpot heeft ervoor gekozen om de vernieuwing eerst geleidelijk te introduceren, zodat het volledige nieuwe ontwerp vertrouwd aanvoelt in plaats van abrupt. En dat is precies waar toegankelijkheid een rol speelt.

Wat verandert er en wanneer?

  • 30 juni 2026 — optionele openbare bèta

  • 31 augustus 2026 — automatische uitrol naar alle gebruikers

Wijziging: kleuren, typografie, randradius, iconen, afstand, hoogte en beweging.
Niet veranderend: Navigatie, structuur, workflow en rapportagelogica. Niets om opnieuw te leren.

Waarom überhaupt de kleuren en de interface veranderen?

HubSpot's antwoord is technisch, en niet zozeer esthetisch.

Het ontwerpsysteem van het platform was al bijna tien jaar niet meer bijgewerkt. In die tijd was het product uitgegroeid tot honderden apps, elk met iets andere componenten, kleuren en interactiepatronen. Dat is de reden waarom een dropdownmenu in de ene app zich anders gedroeg dan hetzelfde dropdownmenu in een andere app – en waarom de donkere modus nooit is geïntroduceerd.

De afgelopen twee jaar heeft het bedrijf het complete systeem van de grond af opnieuw opgebouwd, waarbij filters, tabellen, modals en alle andere bouwstenen zijn gestandaardiseerd. Het nieuwe thema is de visuele weergave van dat systeem.

Volgens HubSpot is het voltooien van deze migratie een voorwaarde voor het lanceren van drie dingen: een donkere modus, een uitgebreidere set thema's en... volledige producttoegankelijkheid .

Dat is het punt waar we even bij stil moeten staan. Toegankelijkheid werd niet gezien als een functie die later kon worden toegevoegd, maar als iets waarvoor de visuele infrastructuur volledig opnieuw moest worden opgebouwd. Wanneer je honderden componenten hebt die zich elk op hun eigen manier gedragen, is er geen realistische manier om ze stuk voor stuk toegankelijk te maken.

De oranje koffer

En nu komt de belangrijkste beslissing – en de beslissing waartegen gebruikers zich het meest hebben verzet.

Oranje was de kenmerkende kleur van HubSpot voor de belangrijkste actieknoppen. In het nieuwe thema is die kleur verdwenen. De reden hiervoor is... zoals door het bedrijf is aangegeven: Oranje op wit voldoet niet aan het minimale contrast dat vereist is door WCAG 2.1 niveau AA. waardoor het moeilijk te lezen is voor mensen met een visuele beperking.

HubSpot probeerde de kleur donkerder te maken. Maar om oranje donker genoeg te maken voor de normale beoordeling, wordt de kleur bruin en verliest hij zijn oorspronkelijke oranje karakter. Vandaar de beslissing om de kleur te verwijderen uit de primaire acties, met de mogelijkheid om hem later via alternatieve thema's terug te brengen.

Het is een beslissing die het waard is om eens goed te bekijken: een bedrijf met een enorme merkbekendheid heeft ermee ingestemd om zijn kenmerkende kleur op een centraal interface-element op te geven, omdat deze niet voldeed aan een toegankelijkheidseis.

De spanning tussen merkidentiteit en naleving van regelgeving is reëel, en wordt meestal omgekeerd opgelost: de kleur behouden en het probleem uitstellen. Hier ging het anders.

De herontwerp betreft de interface van HubSpot, niet de content die je via HubSpot publiceert.

  • De backend — wat je ziet werken binnen het CRM-systeem — profiteert van de update.

  • De frontend De website, landingspagina's, e-mails en formulieren die je met HubSpot bouwt en die je gebruikers bereiken, blijven precies zo toegankelijk als je ze hebt gemaakt.

Een bijgewerkt thema in het CRM-systeem maakt een landingspagina nog niet conform de richtlijnen als deze onvoldoende contrast heeft, een formulier zonder bijbehorende labels bevat of een afbeelding zonder alt-tekst heeft. En dat zijn nu juist de pagina's die onder de Europese Toegankelijkheidsrichtlijn vallen.

Toegankelijkheid is een standaardpraktijk geworden in het bedrijfsleven.

Een belangrijk punt is dat toegankelijkheid in alle communicatie van HubSpot nooit als een wettelijke verplichting wordt gepresenteerd. Er wordt nergens gesproken over boetes, deadlines of vereisten. Het wordt gezien als een productbeslissing, net als de donkere modus, aanpasbare thema's en de consistentie van componenten.

Dat is een teken van volwassenheid. Toegankelijkheid verschuift van het hokje van de wettelijke vereisten naar het hokje van de kwaliteit van de gebruikerservaring, waar het altijd al thuishoorde.

En de oranje behuizing illustreert dit beter dan welke principiële verklaring ook: onvoldoende contrast benadeelt niet alleen mensen met een visuele beperking. Het benadeelt iedereen die in fel zonlicht werkt, iedereen die een goedkope monitor gebruikt, iedereen die aan het einde van een lange dag naar de interface kijkt. Een goed leesbare knop verbetert de ervaring voor iedereen, niet alleen voor een minderheid.

Wanneer toegankelijkheid op deze manier wordt ontworpen – als een beperking die de algehele kwaliteit verhoogt, in plaats van een verplicht vakje – houdt het op een kostenpost te zijn en wordt het wat het altijd al was: goed ontwerp.

Controleer gratis de toegankelijkheid van uw website met 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
Een persoon met een bezorgde blik op het computerscherm.

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

Heeft u meer informatie nodig?

Neem contact met ons op en we helpen u graag verder.

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