Verbinding mislukt. Probeer het opnieuw.

Naar inhoud springen
SEO Tools
Help en documentatie
UX / UI Hoge impact Makkelijk 20–40 minuten

Tekstcontrast tegen de achtergrond

Tekst moet voldoende contrast hebben (WCAG AA 4.5:1).

Wat het is

Contrast is het lichtheidsverschil tussen tekst en achtergrond. Lichtgrijze tekst op een witte achtergrond heeft weinig contrast en is moeilijk leesbaar. WCAG AA vereist een verhouding van minimaal 4,5:1 voor hoofdtekst.

Waarom het belangrijk is

Een laag contrast sluit gebruikers met een zwakker gezichtsvermogen uit en verslechtert de leesbaarheid voor iedereen, vooral op mobiel in zonlicht. Het is een veel voorkomende toegankelijkheidsfout en Google rapporteert dit tijdens audits.

Hoe je het doet

  1. 1Controleer de contrastverhouding (een browsertool of een online contrastcontrole).
  2. 2Voor hoofdtekst streef je naar ≥ 4,5:1, voor grote tekst ≥ 3:1.
  3. 3Vermijd lichtgrijze tekst (#ccc, #ddd) op een witte achtergrond.
  4. 4Dim geen tekst met een te lage dekking.

Voorbeeld

Fout
.text { color: #bbbbbb; background: #ffffff; } /* ~1,9:1 — onleesbaar */
Goed
.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Conclusie

Voldoende contrast is van fundamenteel belang voor de leesbaarheid en toegankelijkheid. Onze statische heuristische vlaggen markeren uiteraard lichte kleuren, maar verifiëren de exacte verhouding in de browser. Donkerdere tekst op een lichte achtergrond (en omgekeerd) is een veilige keuze.

Gerelateerde onderwerpen