WCAG 2.1 / 2.2 contrastrichtlijnen begrijpen
Kleurcontrast is een fundamenteel onderdeel van webtoegankelijkheid. Het zorgt ervoor dat informatie leesbaar is voor iedereen, inclusief mensen met visuele beperkingen zoals kleurenblindheid of verminderd gezichtsvermogen. De Contrastcontrole gebruikt de officiële WCAG 2.1 / 2.2-formule om de contrastverhouding tussen een tekstkleur en een achtergrondkleur te berekenen.
De berekende contrastverhouding wordt weergegeven als een waarde tussen 1:1 en 21:1. Een verhouding van 1:1 betekent dat er absoluut geen contrast is (bijvoorbeeld witte tekst op een witte achtergrond), terwijl 21:1 het maximaal haalbare contrast vertegenwoordigt (zwart op wit). Ontwerpers, ontwikkelaars en contentteams gebruiken deze metingen om te controleren of hun digitale materialen voldoen aan de geldende toegankelijkheidsnormen.
Het verschil tussen AA- en AAA-toegankelijkheidsniveaus
Binnen de Web Content Accessibility Guidelines (WCAG) gelden verschillende conformiteitsniveaus. De Contrastcontrole toetst kleurcombinaties aan de hand van de volgende drempelwaarden:
- AA-niveau: Dit is de algemeen geaccepteerde standaard voor de meeste websites. Voor normale tekst is een contrastverhouding van minimaal 4,5:1 vereist. Voor grote tekst volstaat een verhouding van minimaal 3:1.
- AAA-niveau: Dit is een strengere norm die een nog betere leesbaarheid garandeert. Voor normale tekst is hierbij een verhouding van minimaal 7:1 vereist. Voor grote tekst moet de verhouding minimaal 4,5:1 zijn.
Bij het invoeren van kleuren toont de tool direct of de combinatie voor de verschillende tekstgroottes "Voldoet" of "Onvoldoende" scoort op deze niveaus.
Definitie van normale tekst versus grote tekst
De eisen voor de contrastverhouding hangen nauw samen met de grootte en het gewicht van de letters. Grotere of dikkere letters zijn bij een lagere contrastverhouding immers nog steeds goed leesbaar. De richtlijnen hanteren daarom de volgende definities:
- Grote tekst: Tekst met een grootte van minimaal 18pt (ongeveer 24px), of minimaal 14pt (ongeveer 18,5px) wanneer de tekst vetgedrukt is.
- Normale tekst: Alle tekst die kleiner is dan de hierboven genoemde maten voor grote tekst.
Door dit onderscheid te maken, hoeven ontwerpers voor koppen en grote titels minder strenge contrasten te gebruiken dan voor de lopende tekst.
Contrast voor UI-elementen en grafische componenten
Niet alleen tekst moet goed leesbaar zijn; ook interactieve elementen en visuele informatie vereisen voldoende contrast. De rij "UI & graphics" in de tool controleert de contrastverhouding voor actieve gebruikersinterface-elementen (zoals invoervelden of knoppen) en grafische objecten.
In tegenstelling tot tekst kent deze categorie geen onderscheid tussen AA- en AAA-niveaus. Er geldt één vaste drempelwaarde van minimaal 3:1. De tool toont voor deze rij dan ook slechts één resultaat ("Voldoet" of "Onvoldoende") in plaats van twee aparte resultaten.
Ondersteunde kleurformaten en initiële waarden
De tool accepteert verschillende gangbare kleurformaten voor zowel de tekstkleur als de achtergrondkleur:
- Hex-waarden: bijvoorbeeld
#1a1a1aof#ffffff. - RGB-waarden: bijvoorbeeld
rgb(26, 26, 26). - HSL-waarden.
Bij het opstarten van de tool zijn de standaardwaarden ingesteld op #4f46e5 voor de tekstkleur en #ffffff voor de achtergrondkleur. Dit resulteert in een contrastverhouding van 6.29. Met de wisselknop kunnen de ingevoerde tekst- en achtergrondkleur direct met elkaar worden omgedraaid.
Mocht er een ongeldige kleurcode worden ingevoerd, dan toont de tool een foutmelding. Bij een foutieve tekstkleur verschijnt de melding: "Voer een geldige tekstkleur in, zoals #1a1a1a or rgb(26, 26, 26).". Bij een foutieve achtergrondkleur verschijnt de melding: "Voer een geldige achtergrondkleur in, zoals #ffffff of rgb(255, 255, 255).".
Resultaten en eindoordelen begrijpen
Op basis van de ingevoerde kleuren genereert de tool een samenvattend eindoordeel dat de hoogst behaalde status weergeeft:
| Contrastverhouding | Hoogste resultaat | Weergegeven eindoordeel |
|---|---|---|
| ≥ 7:1 | Voldoet aan AAA voor normale tekst | "Voldoet aan AA en AAA voor normale tekst." |
| ≥ 4,5:1 en < 7:1 | Voldoet aan AA voor normale tekst | "Voldoet aan AA voor normale tekst." |
| ≥ 3:1 en < 4,5:1 | Voldoet aan AA voor grote tekst | "Voldoet alleen aan AA voor grote tekst." |
| < 3:1 | Voldoet niet aan de minimale eisen | "Onder het AA-minimum — verhoog het contrast." |
Privacy en gegevensverwerking
Wanneer je deze Contrastcontrole gebruikt, worden je gegevens lokaal verwerkt. Elke controle wordt in je browser uitgevoerd. Niets van wat je invoert, wordt geüpload naar BroBroGo.
Veelgestelde vragen
Wat betekenen de resultaten voor AA and AAA? AA is het niveau waar de meeste websites naar streven: dit vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA is strenger: 7:1 voor normale tekst en 4,5:1 voor grote tekst. De verhouding loopt van 1:1 (geen contrast) tot 21:1 (zwart op wit).
Wat telt als grote tekst? Tekst vanaf 18pt (ongeveer 24px), of 14pt (ongeveer 18,5px) als deze vetgedrukt is. Grotere tekst blijft leesbaar bij een lager contrast, waardoor deze al voldoet aan AA bij 3:1 en AAA bij 4,5:1, in plaats van de strengere drempels voor normale tekst.
Welke kleurformaten kan ik invoeren? Typ een hex-waarde zoals #1a1a1a, een rgb()-waarde zoals rgb(26, 26, 26), of een hsl()-waarde — of klik op een van de kleurvlakken om een kleur te kiezen. Gebruikt de wisselknop om de tekst- en achtergrondkleur om te draaien.
Gebruikt dit WCAG 2 of de nieuwere APCA-methode? Deze tool gebruikt de WCAG 2.1 / 2.2-formule, de standaard waar toegankelijkheidsrichtlijnen en audits tegenwoordig naar verwijzen. APCA is een nieuwere methode die beter aansluit bij de menselijke waarneming en momenteel wordt ontwikkeld voor WCAG 3. Dit is echter nog geen officiële nalevingsstandaard, dus de resultaten hier gebruiken deze methode nog niet.