Home / Blog / Pa11y contrast fix
♿ WCAG AA

Pa11y in de praktijk: 7 contrast issues oplossen zonder je design te slopen

📅 5 juni 2026•⏱️ 4 min lezen•🛠️ Pa11y + WCAG 2 AA

Een accessibility scan hoeft geen groot redesign te betekenen. Vandaag liep Pa11y tegen 7 contrast errors aan op de Fluister landing page. De oplossing: drie kleine kleurwijzigingen, opnieuw bouwen, opnieuw scannen, klaar.

Kort samengevat:
  • Pa11y vond 7 WCAG2AA contrast errors.
  • Alle failures zaten in kleine UI details: taal-knop, demo URL, meta tekst en badges.
  • Met drie iets donkerdere kleuren kwam alles boven de 4.5:1 grens.

Wat Pa11y precies vond

De scan draaide op de homepage van Fluister en controleerde tegen WCAG 2 AA. Het interessante: één kleur zat maar nét onder de grens. De actieve taal-knop had een contrast ratio van 4.47:1, terwijl WCAG AA voor normale tekst minimaal 4.5:1 verwacht.

De andere meldingen waren duidelijker: lichtgrijze kleine tekst in de hero demo had maar 2.56:1 contrast. Visueel subtiel, maar voor gebruikers met minder zicht, schermreflectie of lagere helderheid gewoon te zwak.

De exacte kleur-fixes

Actieve taal-knop

Voor: #6366f1 + wit
4.47:1
Na: #6265f0 + wit
4.53:1

Browser URL en meta tekst

Voor: #94a3b8 + wit
2.56:1
Na: #68778c + wit
4.56:1

Sidebar count badge

Voor: #64748b + #e8e8ec
3.89:1
Na: #5a6a81 + #e8e8ec
4.51:1

Waarom 4.47:1 toch een probleem is

4.47:1 voelt misschien als mierenneuken. Maar accessibility tools zijn juist nuttig omdat ze objectief zijn. Als je de grens op gevoel gaat interpreteren, stapelen kleine afwijkingen zich op. Vandaag is het één knop. Morgen zijn het formulieren, foutmeldingen en pricing cards.

De beste fix is meestal niet: alles zwart maken. De beste fix is: zo weinig mogelijk veranderen, maar genoeg om betrouwbaar toegankelijk te zijn.

Onze simpele workflow

  1. Draai Pa11y op de live pagina.
  2. Pak eerst errors met concrete selectors en kleuradvies.
  3. Bereken de nieuwe contrast ratio voordat je deployt.
  4. Build en deploy.
  5. Scan opnieuw lokaal of in CI.
npx pa11y https://fluister.dev --standard WCAG2AA

Wat dit met Fluister te maken heeft

Fluister draait om feedback sneller bruikbaar maken. Accessibility checks zijn eigenlijk ook feedback: concreet, herhaalbaar en direct gekoppeld aan productkwaliteit. Een goede feedback loop maakt fouten kleiner, goedkoper en makkelijker op te lossen.

Daarom behandelen we dit soort verbeteringen niet als randzaken. Als iets meetbaar beter kan, pakken we het op. Kleine fixes, snel verifiëren, door naar de volgende verbetering.

Wil je snellere feedback loops?

Met Fluister verzamel je feedback, bugs en ideeën direct vanuit je product.

Start gratisBekijk docs