Meet het WCAG-contrast tussen twee kleuren

Met Kleurcontrast kunnen ontwerpers en front-endontwikkelaars een kleurkeuze vóór goedkeuring op toegankelijkheid beoordelen. Meet het WCAG-contrast tussen twee kleuren.

Meet het WCAG-contrast tussen twee kleuren. Het hulpmiddel is gratis in je browser en toont het resultaat zonder om een account te vragen.

Hoe te gebruiken

Voer de achtergrondkleur in, bijvoorbeeld als hexadecimale code.
Voeg de tekst- of elementkleur toe die u met die achtergrond wilt vergelijken.
Voer de controle uit om de contrastverhouding tussen de twee kleuren te krijgen.
Lees de weergegeven WCAG-drempels voor normale tekst, grote tekst en interface-elementen.
Test een ander kleurenpaar als het eerste resultaat niet aan uw behoeften voldoet.

Voorbeeld

Het voorbeeld vergelijkt een donkere kleur met een lichte. De tool berekent de contrastverhouding en toont de relevante WCAG-drempels. Controleer of de verhouding voldoende is voor normale tekst, grote tekst of interface-elementen, en test daarna een ander paar als uw designsysteem dat toestaat. Het resultaat helpt u beslissen voordat u publiceert.

Invoer

#0F172A
#FFFFFF

Limieten en formaten

De tool vergelijkt twee kleuren, niet de werkelijke leesbaarheid van een afbeelding of foto.
Transparantie, kleurverlopen en overlays worden niet altijd weergegeven.
Een goede verhouding alleen valideert niet elk toegankelijkheidsaspect van een pagina.
Controleer de kleuren voor hover-, actieve en uitgeschakelde toestanden afzonderlijk.
Weergegeven waarden moeten worden geïnterpreteerd op basis van tekstgrootte en doel.

Waar de verwerking gebeurt

Alle contrastberekening gebeurt in uw browser. De kleurcodes die u invoert, blijven op uw apparaat en worden nergens naartoe gestuurd. Het resultaat verschijnt direct na de controle. U kunt de velden wissen of het tabblad sluiten zonder die waarden te bewaren.

Veelgestelde vragen

Welke verhouding moet ik nastreven voor lopende tekst?

WCAG-drempels hangen af van tekstgrootte en doel. Voor normale tekst vereist niveau AA gewoonlijk een hoger contrast dan voor grote tekst. Lees de richtlijnen die de tool voor uw specifieke geval toont en controleer elke tekststijl afzonderlijk.

Kan ik kleurnamen zoals rood of blauw gebruiken?

Het veld verwacht waarden die de tool kan lezen, in het bijzonder hexadecimale kleurcodes. Als een naam niet wordt herkend, vervangt u deze door de bijbehorende hexadecimale code en voert u de controle opnieuw uit.

Controleert de tool contrast op een schermafbeelding?

Nee, de tool berekent contrast tussen twee ingevoerde kleuren. Ze leest geen afbeelding of volledige pagina. Noteer voor een ontwerp de gebruikte kleurcodes en test elk belangrijk paar afzonderlijk.