Kleurcontrastcontrole

Gratis WCAG-kleurcontrastcontrole. Test tekst- en achtergrondkleuren op AA- en AAA-toegankelijkheidsnaleving met een live contrastverhouding en voorbeeld: hex of RGB.

Controleer de contrastverhouding tussen een tekst- en achtergrondkleur aan de hand van WCAG AA- en AAA-standaarden, met een live preview en hex- of RGB-invoer.

Share
Categorie
Ontwikkelaarstools
Inclusief
6-functies
Toegang
Vrij · Geen aanmelding
Privacy
Draait in uw browser
Kleurcontrastcontrole

Loading Contrast Checker......

Please wait a moment

Hoe te gebruiken

Hoe Kleurcontrastcontrole te gebruiken

  1. 01

    Kies de tekstkleur

    Kies of typ de voorgrondkleur.

  2. 02

    Kies de achtergrond

    Kies of typ de achtergrondkleur.

  3. 03

    Lees de verhouding

    Bekijk de contrastverhouding en AA/AAA-resultaten.

  4. 04

    Aanpassen

    Pas de kleuren aan totdat ze voorbijgaan.

Gebruiksgevallen

Veelvoorkomende gebruiksscenario's

  • Controleer of de UI-tekst voldoet aan de WCAG-toegankelijkheid
  • Controleer het knop- en linkcontrast
  • Controleer een merkkleurenpalet
  • Corrigeer de marketingkopie met laag contrast
Overzicht

Maak uw tekst voor iedereen leesbaar

Tekst met laag contrast is een van de meest voorkomende problemen met de toegankelijkheid. Deze checker berekent de exacte contrastverhouding tussen uw tekst- en achtergrondkleuren met behulp van de officiële WCAG-formule voor relatieve helderheid en vertelt u vervolgens of deze voldoet aan AA (4,5:1 voor normale tekst, 3:1 voor grote tekst) en de strengere AAA (7:1 en 4,5:1). Een live voorbeeld toont echte tekst in de door u gekozen kleuren.

Voer kleuren in zoals jij dat wilt

Gebruik de kleurkiezers of typ hexadecimale codes en rgb()-waarden rechtstreeks: de tool parseert beide. Wanneer u een van de kleuren aanpast, worden de verhouding en de badges voor geslaagd/mislukt onmiddellijk bijgewerkt, zodat u een tint kunt verschuiven totdat deze voldoet. Alles draait lokaal, waardoor het een snelle metgezel is bij het ontwerpen van de gebruikersinterface, thema's en marketingpagina's.

Functies
01
WCAG AA & AAA geslaagd/mislukt resultaten
02
Live berekening van de contrastverhouding
03
Hex- en RGB-ingang met kleurkiezers
04
Live tekstvoorbeeld in uw kleuren
05
Normale en grote tekstdrempels
06
Wordt lokaal uitgevoerd in uw browser
Veelgestelde vragen

Veelgestelde vragen

Welke contrastverhouding heb ik nodig om voor WCAG te slagen?+

Voor AA heeft normale tekst 4,5:1 nodig en grote tekst 3:1. Voor de strengere AAA heeft normale tekst 7:1 nodig en grote tekst 4,5:1. Grote tekst is ongeveer 18pt of 14pt vetgedrukt.

Hoe wordt de contrastverhouding berekend?+

Het gebruikt de WCAG-formule voor relatieve luminantie voor beide kleuren en deelt vervolgens de lichtere luminantie (plus 0,05) door de donkerdere (plus 0,05), wat een waarde oplevert van 1:1 tot 21:1.

Kan ik zowel RGB als hex invoeren?+

Ja: typ hexadecimale codes zoals #1e293b of rgb(30, 41, 59), of gebruik de kleurkiezers. Beide formaten worden onmiddellijk geparseerd.

Is het gratis?+

Ja, volledig gratis, zonder aanmelding, volledig in uw browser.