Contrast van een kleurenpalet controleren
Vergelijk alle kleurparen in een palet met de WCAG-contrastdrempels voor tekst.
Een uitgewerkt voorbeeld proberen
Een uitgewerkt voorbeeld proberen
Contrast van een kleurenpalet controleren
Controleer de eenheden en opties en gebruik vervolgens de berekenknop. Het voorbeeld is fictief; vervang de waarden voor uw eigen berekening.
Voorbeeldinvoer
- Paletkleuren (één HEX-kleur per regel)
- #000000 #ffffff #2563eb
Verwachte uitvoer
| Kleur 1 · #000000 | Kleur 2 · #ffffff | Kleur 3 · #2563eb Kleur 1 · #000000 | — | 21,00:1 · AA normale tekst ✓ · AAA normale tekst ✓ · AA grote tekst ✓ · AAA grote tekst ✓ | 4,06:1 · AA normale tekst × · AAA normale tekst × · AA grote tekst ✓ · AAA grote tekst × Kleur 2 · #ffffff | 21,00:1 · AA normale tekst ✓ · AAA normale tekst ✓ · AA grote tekst ✓ · AAA grote tekst ✓ | — | 5,17:1 · AA normale tekst ✓ · AAA normale tekst × · AA grote tekst ✓ · AAA grote tekst ✓ Kleur 3 · #2563eb | 4,06:1 · AA normale tekst × · AAA normale tekst × · AA grote tekst ✓ · AAA grote tekst × | 5,17:1 · AA normale tekst ✓ · AAA normale tekst × · AA grote tekst ✓ · AAA grote tekst ✓ | —
Vergelijk elk paar ondoorzichtige HEX-kleuren en bekijk de WCAG AA- en AAA-resultaten voor normale en grote tekst.
Het hulpmiddel wordt geladen. De uitleg blijft beschikbaar zonder JavaScript.
Methode en beperkingen
Voer één ondoorzichtige HEX-kleur per regel in. Elke matrixcel vergelijkt een kleurpaar. Normale tekst vereist 4,5:1 voor AA en 7:1 voor AAA; grote tekst respectievelijk 3:1 en 4,5:1. Diagonale cellen vergelijken een kleur met zichzelf.
Voer 2–20 ondoorzichtige HEX-kleuren van 3 of 6 cijfers in. Dit berekent alleen tekstcontrast; lettergrootte en -dikte, interfaceonderdelen, afbeeldingen en algemene toegankelijkheid worden niet beoordeeld.
Deel deze tool
Alleen de openbare link naar de tool wordt gedeeld. Je invoer en resultaten blijven hier.
Toon de link om handmatig te kopiëren
In het kort
Vergelijk elk paar ondoorzichtige HEX-kleuren en bekijk de WCAG AA- en AAA-resultaten voor normale en grote tekst.
Deze tool verwerkt je invoer in je browser. De berekeningen versturen je invoer en resultaten niet. De website zelf maakt netwerkverzoeken; bezoekgegevens gaan alleen met je toestemming naar Google Analytics.
Veelgestelde vragen
Wat betekent de contrastverhouding?
Die vergelijkt de relatieve luminantie van twee kleuren. Een hogere verhouding verbetert tekstcontrast, maar bewijst op zichzelf niet dat een pagina toegankelijk is.
Herkent het hulpmiddel grote tekst?
Nee. Het toont AA- en AAA-drempels voor normale en grote tekst. Gebruik de resultaten voor grote tekst alleen als lettergrootte en -dikte voldoen aan de WCAG-definitie.
Bronnen en verwijzingen
Deze bronnen beschrijven de genoemde standaard of browser-API; ze valideren de uitvoer van het hulpmiddel niet.