WCAG-kleurkontrastoetser

Evalueer die kontrasverhouding van teks- en agtergrondkleure gebaseer op WCAG 2.1-riglyne. Genereer onmiddellik toeganklike kleuraanpassings.

HEX/RGB/HSL
HEX/RGB/HSL
Alles loop lokaal in jou browser.

Regstreekse Teksvoorbeeld

Groot Opskrif (18pt Vet / 24pt Normaal)

Dit is 'n voorbeeld van die groot opskrifteksstyl.

Normale teks (onder 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elite.

Kontrasverhouding

18.6:1

WCAG 2.1 Nakomingstatus

WCAG AA-vereistes
Normale teks (4.5:1) PASS
Groot Teks (3.0:1) PASS
WCAG AAA-vereistes
Normale teks (7.0:1) PASS
Groot Teks (4.5:1) PASS

WCAG 2.1 Riglyne

Verifieer kontraststandaarde maklik om toeganklike koppelvlakke te bou wat voldoen aan Afdeling 508, ADA, en WCAG AA of AAA-riglyne.

Voorstellingsenjin

Pas kleure outomaties inkrementeel langs HSL-koördinate aan om die naaste alternatiewe te vind wat aan die kontrasverhoudingskriteria voldoen.

Volledig kliënt-kant

Bewerkings word plaaslik in jou blaaierkonteks uitgevoer. Geen kleure, lêers of telemetriese koördinate word na ons bedieners gestuur nie.

Verwante Kleurnutsgoed

HEX RGB HSL-kleur-omskakelaar
Skakel kleure om en pas ligheidskoördinate aan.
Beeldkleurkiesser
Onttrek kleurpalette uit ontwerpmockups.
CSS-kleur-omskakelaar
Skakel tussen CMYK-, HSV-, RGB-, HSL- en HEX-formate om.

Kleurkontras-kontroleerder

Bereken WCAG-kontrastverhoudings vir voor- en agtergrondkleure en wys algemene teksgrootte-resultate.

Invoer
Twee geldige CSS-kleure en opsionele voorbeeldteks.
Uitgang
'n kontrasverhouding met WCAG AA- en AAA-slaag- of druip-aanwysers.
Werklike beperkings
Die berekening dek slegs luminansiekontras; dit sertifiseer nie 'n koppelvlak of maak voorsiening vir lettertipeweergawe, beweging, fokus of nie-kleuraanwysings nie.
Privaatheid en datahantering
twee geldende CSS kleur en optiewe voorbeeldtekst word verwerk in hierdie browser-kaap. Convertr ontvang dit nie of bewaar dit nie; sluit of herloading van die bladsy verduidelik die werkingsstand, tenzij die instrument uitdruklik 'n plaaslike download bied nie.

Hoe om hierdie instrument te gebruik

  1. Verskaf twee geldige CSS-kleure en opsionele voorskouteks in die instrumentbeheer.
  2. Kies die instellings wat 'n kontrasverhouding met WCAG AA en AAA slaag- of druip-aanwysers beïnvloed, en voer dan die instrument uit.
  3. Hersien 'n kontrasverhouding met WCAG AA- en AAA-slaag- of druipaanwysers voordat jy dit kopieer of aflaai.

Algemene mislukkingsmodusse

Ongeldige kleure kan nie gemeet word nie, en deursigtigheid sonder 'n opgeloste agtergrond kan 'n verhouding betekenisloos maak.

Nuttige voorbeeld

Vergelyk #1f2937-teks op #ffffff om die verhouding vir normale en groot teks te beoordeel.