Zo gebruik je het
- Voer beide kleuren in als hex, rgb, hsl of oklch.
- Bekijk de contrastverhouding en de voorbeeldtekst.
- Controleer de AA- en AAA-resultaten voor de gewenste tekstgrootte.
Opties uitgelegd
- Contrastverhouding
- De verhouding loopt van 1:1 tot 21:1; een hogere waarde geeft een duidelijker verschil.
- WCAG-niveaus
- AA en AAA gebruiken verschillende drempels voor normale en grote tekst.
- Kleurformaat
- Hex, rgb(), hsl() en oklch() worden geaccepteerd.
Hoe de verhouding wordt berekend
Elke kleur wordt omgezet van sRGB naar lineair licht en vervolgens naar relatieve luminantie:
lineair = c ÷ 12,92 als c ≤ 0,04045
lineair = ((c + 0,055) ÷ 1,055) ^ 2,4 anders (c ligt tussen 0 en 1)
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
verhouding = (L_lichter + 0,05) ÷ (L_donkerder + 0,05)Groen telt het zwaarst omdat het oog daar het gevoeligst voor is. Enkele resultaten op een witte achtergrond:
| Tekstkleur | Verhouding | Resultaat |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5,57 : 1 | AA voor normale tekst, niet AAA voor normale tekst |
| #767676 | 4,54 : 1 | AA voor normale tekst |
| #777777 | 4,48 : 1 | Voldoet niet aan AA voor normale tekst, wel voor grote tekst |
De WCAG-definities staan in Understanding Success Criterion 1.4.3.
Veelgestelde vragen
Welke contrastverhouding heeft WCAG AA nodig?
Voor normale tekst is 4,5:1 nodig; voor grote tekst 3:1. AAA gebruikt hogere drempels.
Is een geslaagde contrasttest genoeg voor toegankelijkheid?
Nee. Ook focus, tekstgrootte, niet-kleurseigenschappen en de rest van de interface bepalen toegankelijkheid.
Waarom lijkt een kleur op mijn scherm anders?
Scherm, helderheid, kleurprofiel en omgeving beïnvloeden de waarneming. De tool rekent met de ingevoerde kleurwaarden.
Privacy
Deze tool draait volledig in je browser. Je bestanden en tekst worden op je eigen apparaat verwerkt en nooit naar onze servers geüpload.