Dikgedrukte of grote tekst

Contrast tussen tekst en de achtergrondkleur moet aan minimale eisen voldoen. Zo is de tekst beter leesbaar voor slechtzienden. Binnen de richtlijnen van de WCAG wordt er een verschil gemaakt tussen normale (lopende) tekst en grote of dikgedrukte tekst. Dat verschil bepaalt welke minimale contrastverhouding je nodig hebt.

Auteur

Vincent van Brakel

Als onderzoeker digitale toegankelijkheid voert Vincent ruim 8 jaar audits uit voor websites en apps. De focus ligt hierbij niet alleen op de criteria, maar vooral op de drempels voor de doelgroep en hoe we deze samen kunnen oplossen.

In dit artikel

Inhoudsopgave

Wanneer is tekst “groot” of “dikgedrukt”?

Grote tekst is gedefinieerd als tekst van minimaal 18pt (24px) bij normale tekst, of minimaal 14pt (19px)
wanneer de tekst dikgedrukt is (font-weight 700 of hoger).

Dit onderscheid is belangrijk omdat grote of dikgedrukte tekst makkelijker leesbaar is dan kleine, dunne tekst. Daarom mag de minimale contrastverhouding voor deze tekstsoorten lager zijn.

Minimale contrastverhoudingen

Voor WCAG-criterium 1.4.3 (Contrast Minimum) gelden de volgende ondergrenzen:

  • Normale, lopende tekst: minimaal 4,5:1
  • Grote of dikgedrukte tekst: minimaal 3,0:1

Praktische voorbeelden

Een kop van 24px mag dus met een contrast van 3,0:1 nog voldoen, terwijl een stuk lopende tekst van 16px minimaal 4,5:1 nodig heeft. Zeker bij buttons, labels en korte UI-teksten gaat dit vaak mis: ze lijken “groot genoeg”, maar vallen net onder de grens van 19px bold of 24px regular.

Uitzondering: logo’s en beeldmerken

Let op: logo’s en beeldmerken vallen buiten de eisen van 1.4.3. Een logo hoeft dus niet aan minimale contrastverhoudingen te voldoen. Voor gewone tekst in afbeeldingen (zoals banners of promo’s) gelden de contrasteisen wel, tenzij het echt om een logo of puur decoratieve tekst gaat.

Hulp bij digitale toegankelijkheid

Inzicht in de toegankelijkheid van je website? Of advies bij het implementeren van de webrichtlijnen? We denken graag met je mee. Neem contact op met onze WCAG-specialisten voor meer informatie.