Kleurcontrastchecker

Controleer het contrast tussen voorgrond- en achtergrondkleuren voor normale en grote tekst.

Kleurcontrastchecker

Een resultaat in de browser voor planning en referentie.

VoorgrondAchtergrond

CSS / HEX

GIDS

Wat je moet controleren voordat je het gebruikt

Wanneer deze tool nuttig is

Gebruik deze tool voordat je voorgrond- en achtergrondkleuren voor de hoofdtekst, labels of knoppen vaststelt. Voer twee HEX-kleuren in om hun contrastverhouding en de resultaten van de drempels voor normale tekst en grote tekst te zien.

Hoe het resultaat is ontstaan

De berekening lineariseert de sRGB-kanalen, bepaalt de relatieve luminantie en deelt de lichtere luminantie plus 0.05 door de donkere luminantie plus 0.05. Daarna vergelijkt het de ratio met de tekstdrempels 3:1, 4.5:1 en 7:1.

Praktisch voorbeeld en interpretatie

Als je voorgrond #111111 op achtergrond #FFFFFF invoert, krijg je een hoge ratio. Controleer eerst AA normal voor kleine bodytekst; voor een combinatie bedoeld voor grote kopteksten, lees ook het resultaat AA large.

Reikwijdte en beperkingen

Een behaalde ratio betekent niet dat een toegankelijkheidscontrole klaar is. Test echte lettergrootte en -gewicht, interactieve toestanden, tekst over afbeeldingen en alle informatie die alleen via kleur wordt overgebracht.

Veelgestelde vragen

Hoe verplaats ik een kleur van de kleurcontrastcontrole naar een andere app?

Gebruik de kopieerknop onder het resultaat om CSS-, HEX- of HSL-tekst te kopiëren. Controleer of de doel-app hetzelfde kleurformaat interpreteert.

Komt een schermkleur uit de kleurcontrastcontrole overeen met afdrukken?

Niet automatisch. Emissieve RGB-schermen en reflecterend papier en inkt gebruiken verschillende kleurgamutten en mengmodellen, dus printprofielen en proefdrukken blijven nodig.

Kan ik een design token alleen op basis van de kleurcontrastcontrole goedkeuren?

Gebruik het als kandidaat, test daarna de echte achtergrond, donkere modus, interactiestanden en tekstcontrast voordat je een token benoemt en goedkeurt.