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 koptekststijl.

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

Past kleuren automatisch incrementeel aan langs de HSL-coördinaten om de dichtstbijzijnde alternatieven te vinden die voldoen aan de contrastratiocriteria.

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
Converteer tussen CMYK, HSV, RGB, HSL en HEX-formaten.

Kleurcontrast Checker

Bereken WCAG-contrastratio's voor voor- en achtergrondkleuren en toon gebruikelijke tekstgrootteresultaten.

Invoer
2 geldige CSS-kleuren en optionele voorbeeldtekst.
Uitvoer
Een contrastverhouding met WCAG AA en AAA geslaagd of mislukt indicatoren.
Echte beperkingen
De berekening dekt alleen luminantiecontrast; het certificeert geen interface of houdt rekening met lettertypeweergave, beweging, focus of niet-kleurige aanwijzingen.
Privacy en gegevensverwerking
Twee geldende CSS kleuren en optionele voorbeeldtekst worden verwerkt in deze browser-tab. Convertr 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 geldige CSS-kleuren en optionele voorbeeldtekst in de toolbediening.
  2. Kies de instellingen die een contrastverhouding met WCAG AA en AAA geslaagd of mislukt indicatoren beïnvloeden, voer dan het gereedschap uit.
  3. Bekijk een contrastverhouding met WCAG AA- en AAA-slaag- of faalindicatoren voordat je deze kopieert of downloadt.

Veelvoorkomende foutmodi

Ongeldige kleuren kunnen niet worden gemeten, en transparantie zonder een opgeloste achtergrond kan een verhouding zinloos maken.

Nuttig voorbeeld

Vergelijk #1f2937 tekst op #ffffff om de verhouding voor normale en grote tekst te beoordelen.