WCAG Kleurcontrast Checker

Evalueer de contrastverhouding van tekst- en achtergrondkleuren volgens de WCAG 2.1-richtlijnen. Genereer direct toegankelijke kleuraanpassingen.

HEX/RGB/HSL
HEX/RGB/HSL
Alles draait lokaal in je browser.

Live Tekstvoorbeeld

Grote Kop (18pt Vet / 24pt Normaal)

Dit is een voorbeeld van de grote heading text style.

Normale Tekst (Onder 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Contrastverhouding

18.6:1

WCAG 2.1 Nalevingsstatus

WCAG AA Vereisten
Normale Tekst (4.5:1) PASS
Grote Tekst (3.0:1) PASS
WCAG AAA Vereisten
Normale Tekst (7.0:1) PASS
Grote Tekst (4.5:1) PASS

WCAG 2.1 Richtlijnen

Controleer eenvoudig contraststandaarden om toegankelijke interfaces te bouwen die voldoen aan Sectie 508, ADA en WCAG AA of AAA richtlijnen.

Suggestie-engine

Automatisch aanpassen kleuren incrementeel langs de HSL coördinaten om de dichtstbijzijnde alternatieven te vinden die voldoen aan de contrast ratio criteria.

Volledig Client-Side

Berekeningen worden lokaal uitgevoerd binnen uw browsercontext. Geen kleuren, bestanden of telemetrie-coördinaten worden naar onze servers verzonden.

Gerelateerde Kleurtools

HEX RGB HSL Kleur Omzetter
Converteer kleuren en pas lichtheidscoördinaten aan.
Afbeelding Kleurkiezer
Extraheer kleurenpaletten uit designmockups.
CSS Kleurconverter
Convert tussen CMYK, HSV, RGB, HSL en HEX formaten.

Kleurcontrast Checker

Bereken de WCAG contrast ratio's voor voor- en achtergrondkleuren en tonen gebruikelijke tekstgrootte resultaten.

Invoer
2 geldende CSS kleuren en optionele voorbeeldtekst.
Uitvoer
Een contrastverhouding met WCAG AA en AAA pass of fail indicators.
Echte beperkingen
De berekening bedekt alleen de contrast van de lichtheid; het certificeert geen interface of account voor font rendering, beweging, focus of niet-kleurige coes.
Privaciteit en gegevensbehandeling
Twee geldende CSS kleuren en optionele voorbeeldtekst worden verwerkt in deze browser-tab. Converter ontvangt of opslaat het niet; het sluiten of herladen van de pagina helpt de werkomstand te verduidelijken tenzij het gereedschap uitdrukkelijk een lokale download biedt.

Hoe deze tool te gebruiken

  1. Geef twee geldende CSS kleuren en optionele voorbeeldtekst in de toolcontroles.
  2. Kies de instellingen die een contrastverhouding met WCAG AA en AAA pass of faillite indicatoren beïnvloeden, dan draai het gereedschap uit.
  3. Bekijk een contrastverhouding met WCAG AA en AAA pass of faillite indicatoren voordat u het kopiëren of downloaden.

Gemeenschappelijke mislukkingsmodi

Onbeleefde kleuren kunnen niet worden gemeten, en transparantie zonder een opgelost achtergrond kan een ratio zinloos maken.

nuttig voorbeeld

Vergelijk #f2937 tekst op #ffffff om het ratio voor normaal en groot tekst te beoordelen.