Het contrast van tekst- en achtergrondkleur controleren (WCAG)
Op deze pagina
Kort antwoord: open Kleurenpalet uit afbeelding van Imgovo, open het tabblad Contrast, kies een tekstkleur en een achtergrondkleur en lees het WCAG 2.2-resultaat. Een verhouding van 4,5:1 haalt AA voor normale tekst, 3:1 haalt AA voor grote tekst en 7:1 haalt AAA voor normale tekst. Je kunt de kleuren uit een foto opbouwen of je eigen HEX-codes typen. Er wordt niets geüpload.
Wat een contrastverhouding betekent
De contrastverhouding vergelijkt hoe licht twee kleuren zijn. Ze loopt van 1:1 (identieke kleuren) tot 21:1 (zwart op wit). Tekst met te weinig contrast is moeilijk te lezen, vooral voor mensen met een beperkt zicht, op een telefoon in de zon, of op een slecht scherm.
De getallen om te onthouden
| Niveau | Gewone tekst | Grote tekst | Onderdelen van de interface en iconen |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Grote tekst is minimaal 24 px, of 18,66 px als de tekst vet is.
Stap voor stap
- Open Kleurenpalet uit afbeelding. Voeg een afbeelding toe om een palet op te bouwen, of gebruik Een palet maken zonder afbeelding.
- Open het tabblad Contrast.
- Kies de tekstkleur en de achtergrondkleur uit je palet of voer je eigen kleur in.
- Bekijk de voorbeelden (grote en normale tekst) en de WCAG 2.2-resultaten voor dit paar: de verhouding en geslaagd of niet geslaagd voor AA en AAA.
- Als het paar niet slaagt, klik dan op Een leesbare tekstkleur voorstellen en daarna op Suggestie gebruiken.
- Gebruik Omwisselen om lichte tekst op een donkere achtergrond te proberen en omgekeerd. Open Alle paren om elke combinatie in het palet te zien.
Kleuren uit een foto
Als je een palet uit een foto hebt gehaald, ga er dan niet van uit dat het voor tekst werkt. Zachte of vergelijkbare kleuren slagen vaak niet. Kies een donker kleurvak voor tekst en een licht voor de achtergrond, of andersom, en test het paar. Hoe je het palet maakt, lees je in Een kleurenpalet uit een afbeelding halen.
Zien hoe anderen het palet kunnen zien
De tool toont ook een benadering van veelvoorkomende verschillen in kleurenzicht. Het helpt je kleuren op te merken die voor sommige mensen op elkaar lijken. Het is geen contrasttest en geen medisch hulpmiddel.
De kleuren in een interface uitproberen
Het tabblad Voorbeeld toont je kleuren in een kleine pagina-indeling met een pagina, een kaart, tekst, een accent en een rand, zodat je ze in context ziet voordat je de codes in je CSS kopieert.
Beperkingen
De controle meet telkens één paar effen kleuren. Ze test geen foto’s achter tekst, kleurverlopen, hover-toestanden of de rest van toegankelijkheid. Zie het resultaat als een handige controle, niet als een certificaat.
Privacy
De kleuren worden in je browser gecontroleerd. Er wordt niets geüpload.
Probeer het nu
Open Kleurenpalet uit afbeelding, ga naar Contrast en test je tekst- en achtergrondkleuren.
Veelgestelde vragen
Welke contrastverhouding heb ik nodig?
WCAG 2.2 vraagt op niveau AA minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst. Niveau AAA vraagt 7:1 voor normale tekst en 4,5:1 voor grote tekst. Interface-onderdelen en iconen hebben 3:1 nodig.
Wat telt als grote tekst?
Minimaal 24 px, of 18,66 px als de tekst vet is.
Is dit een certificaat dat mijn ontwerp toegankelijk is?
Nee. De controle meet één paar effen kleuren. Het is geen certificaat voor een heel ontwerp en test geen afbeeldingen, kleurverlopen, tekst op foto’s of de andere onderdelen van toegankelijkheid.
Kan Imgovo een leesbare tekstkleur voorstellen?
Ja. Kies een achtergrondkleur en gebruik Een leesbare tekstkleur voorstellen. Je kunt de suggestie dan gebruiken of je eigen kleur houden.
Kan ik alle kleuren van een palet tegelijk controleren?
Ja. De weergave Alle paren toont elk tekst- en achtergrondpaar van je palet met het resultaat.
Wordt mijn afbeelding geüpload?
Nee. De kleuren worden in je browser gecontroleerd en er verlaat niets je apparaat.