Zo gebruik je Contrastchecker
- 1
Voer twee kleuren in
Typ de tekstkleur en de achtergrondkleur als HEX, rgb(), hsl() of oklch(), of open het ronde kleurvlak om een kleur te kiezen.
- 2
Lees het oordeel
De verhouding en vijf rijen met geslaagd of mislukt tonen AA en AAA voor normale en grote tekst en de 3:1-regel voor pictogrammen en randen.
- 3
Pas een oplossing toe
Als een niveau mislukt, gebruik dan de dichtstbijzijnde donkerdere of lichtere tekst of achtergrond die wel slaagt en kopieer de nieuwe waarde.
Limieten en Pro
Gratis en onbeperkt: willekeurig veel controles, 5 WCAG 2.2-criteria per kleurenpaar, 2 voorgestelde oplossingen per mislukt niveau en een raster van maximaal 7 kleuren.
Over Contrastchecker
Deze contrastchecker meet hoe ver twee kleuren qua helderheid uit elkaar liggen. Hij gebruikt daarvoor de formule voor relatieve luminantie uit WCAG 2.2, dezelfde berekening als bij toegankelijkheidscontroles in browsers en ontwerpplugins. Het resultaat is een verhouding tussen 1:1 (identiek) en 21:1 (zwart op wit). Succescriterium 1.4.3 vraagt op niveau AA om 4,5:1 voor lopende tekst en 3:1 voor grote tekst; 1.4.6 verhoogt dat voor AAA naar 7:1 en 4,5:1; 1.4.11 vraagt om 3:1 voor betekenisvolle elementen zonder tekst, zoals focusringen, randen van invoervelden en lijnen in grafieken.
Een live voorbeeld toont beide tekstgroottes, een knop met rand en een pictogram in jouw kleuren, zodat je naast het getal ook de leesbaarheid kunt beoordelen. Verhoudingen worden afgekapt op twee decimalen en niet afgerond, want een paar met 4,496:1 voldoet niet aan een eis van 4,5:1. Als een niveau mislukt, zoekt de checker in de OKLCH-helderheid van één kleur, waarbij tint en chroma gelijk blijven, en stelt hij de dichtstbijzijnde waarde voor die wel slaagt, apart voor de tekst en de achtergrond.
De checker is bedoeld voor effen kleuren. Hij kan geen tekst op foto's of verlopen beoordelen, en ook geen transparantie, de weergave van letterdikte op een bepaald scherm of de nieuwere APCA-methode die voor WCAG 3 is voorgesteld. Beschouw een voldoende dus als het minimum en test ook op echte schermen.
Privacy
Beide kleuren blijven in dit tabblad: de verhouding, de controles op geslaagd en mislukt en de voorgestelde oplossingen worden door je browser berekend. Er worden geen kleurwaarden naar een server gestuurd of opgeslagen.