• Door naar de hoofd inhoud
  • Spring naar de voettekst
  • Naar navigatie
CARDAN Technobility
  • Hoe wij helpen
    • Onderzoeken
    • Consultancy
    • Trainingen
    • Lezingen
  • Digitale toegankelijkheid
    • Voor overheden
    • Voor bedrijven
    • Over de WCAG
    • Waarmerk drempelvrij.nl
  • Over ons
    • Werken bij
    • Vacatures
    • Over Technobility
    • Onze mensen
  • Actueel
  • Zoeken
  • Contact

Home » Actueel » Kleurcontrast in WCAG 2.2 en WCAG 3

Goed kleurcontrast: zorg dat je alles goed ziet

Bart Pluijms Consultant & Trainer
26 april 2022 6 minuten lezen

Kleur is een krachtige manier om mee te communiceren. Met kleur breng je informatie over, activeer je mensen of maak je dingen duidelijk. Ook kan kleur zorgen voor een bepaald gevoel bij de lezers van je website, app of document. Het is wel belangrijk dat iedereen alles goed ziet. Voldoende kleurcontrast is daarom belangrijk. Hoe zit dit in WCAG 2.2? En wat verandert er in WCAG 3?

De leesbaarheid van tekst is een belangrijk onderdeel van digitale toegankelijkheid. Het verschil tussen de kleuren van de tekst en de achtergrond bepaalt voor een groot deel hoe goed de tekst gelezen kan worden. WCAG 2.2 gebruikt al een aantal jaar een methode om het kleurcontrast van tekst te bepalen. Maar deze methode heeft een aantal beperkingen. WCAG 3 moet hier over een aantal jaar verbetering in brengen met een nieuwe contrast methode: APCA.

Kleurcontrast: het verschil tussen twee kleuren

Met kleurcontrast wordt het verschil tussen twee kleuren bedoeld. Dit verschil is de contrastverhouding. Meestal gaat het dan om het verschil tussen de kleur van de tekst en de achtergrondkleur. Maar kleurcontrast is ook belangrijk voor bijvoorbeeld afbeeldingen, knoppen, icoontjes en velden in formulieren.

Voor alle gebruikers is voldoende kleurcontrast belangrijk. Maar vooral voor gebruikers met een visuele beperking is een hoog contrast soms noodzakelijk om de tekst te kunnen lezen. Ook als de zon op je scherm schijnt of als je ’s avonds de helderheid van je scherm omlaag zet, helpt een goed kleurcontrast.

Het probleem is dat het kleurcontrast niet iets is dat voor alle mensen hetzelfde werkt. Het is een perceptie van kleur. Het heeft te maken met hoe onze hersenen omgaan met twee verschillende kleuren. Ook de grootte van letters en de dikte heeft invloed op hoe wij kleuren waarnemen. En dat geldt ook voor de afstand tussen woorden, letters en regels. Daar zitten ook de beperkingen in van de methode die voor WCAG 2.2 wordt gebruikt om het kleurcontrast te meten: er wordt geen rekening gehouden met hoe wij kleuren ervaren. De beoordeling is erg zwart-wit.

Visuele vergelijking tussen te weinig kleurcontrast en voldoende kleurcontrast.

Kleurcontrast volgens WCAG 2.2

In de Web Content Accessibility Guidelines (WCAG 2.2) zijn een paar webrichtlijnen (succescriteria) die iets zeggen over het kleurcontrast van tekst en andere belangrijke onderdelen van je website, app of document.

Kleurcontrast meten voor WCAG 2.2

Het kleurcontrast kan je op verschillende manieren meten. Er zijn dan ook heel veel verschillende color contrast checkers. Ze geven allemaal antwoord op één vraag: “Welke kleur moet de tekst hebben om leesbaar te zijn op een achtergrondkleur?” Het antwoord tonen ze bijna allemaal met een rood kruis of een groen vinkje. Soms wordt ook een nummer gegeven. 4,5:1 is goed, 3:1 is “ok” voor grotere tekst, 2:1 is fout. Hoe hoger het eerste nummer, hoe beter leesbaar de tekst is.

Wil je dit zelf eens controleren voor jouw huisstijl? Wij zijn fan van de Colour Contrast Analyser van TPGi. Ook in de Developer Tools van Chrome kan je vaak al het kleurcontrast meten.

Twee teksten op een lichtgrijze achtergrond en een screenshot van de Colour Contrast Analyser. Eerste tekst "Lichtgrijze tekst #999999 op een lichtgrijze achtergrond #EEEEEE voldoet niet. - WCAG 2.2 2,5:1". Tweede tekst: "Grijze tekst #666666 op een lichtgrijze achtergrond #EEEEEE voldoet wel. - WCAG 2.2 4,9:1".

Contrast van tekst

Succescriterium 1.4.3 en succescriterium 1.4.6 gaan over het contrast tussen tekst en achtergrond. Voor websites, apps en documenten die aan de standaarden voor digitale toegankelijkheid willen voldoen is een minimaal contrast van 4,5:1 voor de meeste teksten perfect (succescriterium 1.4.3). Maar een extra hoog kleurcontrast van 7,0:1 (succescriterium 1.4.6) kan in sommige gevallen erg helpen. Teksten zijn dan nog beter leesbaar en dat is natuurlijk mooi meegenomen.

Contrast van niet-tekstuele elementen

Ook voor andere belangrijke elementen zonder tekst is het kleurcontrast belangrijk. Voor bijvoorbeeld belangrijke afbeeldingen, icoontjes en velden in formulieren is een minimaal kleurcontrast van 3,0:1 vereist. Maar ook hier geldt: hoe hoger het kleurcontrast, hoe beter zichtbaar.

Advanced Perceptual Contrast Algorithm (APCA) in WCAG 3

WCAG 3 gaat zeer waarschijnlijk een nieuwe methode gebruiken om het kleurcontrast te meten. Dit is het Advanced Perceptual Contrast Algorithm, oftewel APCA. Het is een grote verbetering ten opzichte van de huidige methode. Go APCA!

APCA houdt dus wel rekening met de grootte van letters en hoe vetgedrukt ze zijn. Ook de afstand tussen letters, woorden en zinnen is van belang. Hoe wij kleur waarnemen hangt af van:

  • De grootte van het gekleurde element.
    Oftewel: gebruik je een klein en dun lettertype of grote en dikke letters?
  • De helderheid van de achtergrond.
    Gebruik je een donkere kleur op een lichte achtergrond of juist andersom?
  • Andere factoren zoals de ruimte rondom de tekst en veel meer.

De APCA score is een cijfer tussen 0 en 100. Hoe hoger de score, hoe beter:

  • 15: Minimum voor niet tekstuele elementen
  • 30: Het absolute minimum voor tekst, ongeacht de grootte, dikte, etc
  • 45: Minimum voor grote tekst (vergelijkbaar met het oude 3:1)
  • 60: Minimum voor normale tekst (het oude 4,5:1)
  • 75: Het gewenste niveau voor normale tekst
  • 90: Het minimum voor hele dunne ‘normale’ tekst (het oude 7:1)
Kleurcontrast van 8 combinaties vergeleken voor WCAG 2.2 en de APCA-score. Klik voor een tabel met deze informatie op de knop 'Kleurcontrast vergelijken voor WCAG 2.2 en APCA'

Kleurcontrast vergelijken voor WCAG 2.2 en APCA

In alle gevallen gaan we uit van een tekst van 20px en font-weight:500

Kleurcontrast vergelijken voor WCAG 2.2 en APCA.
TekstkleurAchtergrondkleurWCAG 2.2APCA
#000000 (zwart)#F06000 (oranje)6,4:1 – voldoet op AA45 – voldoet niet
#FFFFFF (wit)#F06000 (oranje)3,3:1 – voldoet niet65 – voldoet
#43A49E (mint)#000000 (zwart)7,0:1 – voldoet op AAA46 – voldoet niet
#3E9691 (mint)#FFFFFF (wit)3,5:1 – voldoet niet63 – voldoet
#FFFFFF (wit)#1B90DF (lichtblauw)3,4:1 – voldoet niet67 – voldoet
#1B90DF (lichtblauw)#FFFFFF (wit)3,4:1 – voldoet niet81 – voldoet
#FFFFFF (wit)#654F6F (paars)7,2:1 – voldoet90 – voldoet
#654F6F (paars)#FFFFFF (wit)7,2:1 – voldoet85 – voldoet
Kleurcontrast vergelijken voor WCAG 2.2 en APCA.

APCA score meten voor WCAG 3

Je kan je eigen kleurcontrasten meten met de APCA Contrast Calculator. Als je daar twee kleuren invult zie je meteen voor welke lettergrootte en dikte de kleurcombinatie we of niet voldoet.

In de Developer Tools van Chrome kan je nu al de APCA scoren meten. Dit doe je als volgt:

  1. Ga naar Chrome Developer Tools
  2. Klik het tandwieltje rechtsboven, dit zijn de Instellingen
  3. Klik op de optie “Experimenten”
  4. Zoek in dat lijstje naar APCA en zet het vinkje aan

Je kan nu APCA gebruiken in Chrome Developer tools.

Designers worden blij van APCA

UX-designers en andere ontwerpers worstelen nu vaak met de eisen voor kleurcontrast van WCAG 2.2. Dat snappen wij best! Een goed kleurcontrast kan namelijk best wel impact hebben op je huisstijl. Je moet soms keuzes maken.

Met de komst van APCA krijgen designers meer mogelijkheden om kleuren te gebruiken die toch een goed kleurcontrast hebben. Opeens wordt het mogelijk om wel een witte tekst op een oranje knop te plaatsen! In onze training voor UX-designers gaan we hier dan ook al kort op in, ook al is APCA nog geen goedgekeurde standaard. We zullen nog even moeten wachten op WCAG 3, voordat we het ook écht kunnen gebruiken.

  • Volg Bart Pluijms op LinkedIn
Bart Pluijms

Na bijna 10 jaar binnen mijn eigen bedrijf op diverse 'stoelen' te hebben gezeten van projectleider, UX-designer en frontend-developer deel ik nu mijn kennis en ervaringen als adviseur en trainer digitale toegankelijkheid bij Cardan Technobilty. Mijn doel: een gezelliger internet voor iedereen.

Website call-to-actions

Ontvang gratis tips en updates

Benieuwd hoe jij jouw digitale communicatie toegankelijk en inclusief maakt? Meld je aan voor onze nieuwsbrief en ontvang de ultieme WCAG checklist!
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Over Cardan

Specialist in digitale toegankelijkheid.

Footer

Diensten

  • Onderzoeken
  • Consultancy
  • Trainingen

Cardan Technobility

  • Over ons
  • Onze mensen
  • Overzicht waarmerkdragers
  • Digitale toegankelijkheid
  • WCAG
  • WCAG 2.1
  • WCAG 2.2

Adres

Talent Square 13
5038 LX Tilburg
[email protected]

Certificeringen

Waarmerk Drempelvrij - 2 sterrenDDAI geaccrediteerd NCI - ISO 9001 gecertificeerd

© 2023 · Cardan Technobility

  • Algemene voorwaarden
  • Colofon
  • Disclaimer
  • Privacy
  • Toegankelijkheid
  • Sitemap
  • Cardan Technobility op LinkedIn
  • Cardan Technobility op Instagram
  • Cardan Technobility op Facebook