WCAG Színkontraszt Ellenőrző

Értékelje a szöveg és a háttér színeinek kontrasztarányát a WCAG 2.1 irányelvek szerint. Azonnal generáljon akadálymentes színbeállításokat.

HEX/RGB/HSL
HEX/RGB/HSL
Minden helyben fut a böngészőjében.

Élő Szöveg Előnézet

Nagy Címsor (18pt Félkövér / 24pt Normál)

Ez a nagy címszöveg stílusának előzetes bemutatása.

Normál Szöveg (18pt Alatt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kontrasztarány

18.6:1

WCAG 2.1 Megfelelőségi Állapot

WCAG AA Követelmények
Normál Szöveg (4.5:1) PASS
Nagy Szöveg (3.0:1) PASS
WCAG AAA Követelmények
Normál Szöveg (7.0:1) PASS
Nagy Szöveg (4.5:1) PASS

WCAG 2.1 Irányelvek

Könnyedén ellenőrizheti a kontraszt szabványokat, hogy akadálymentes felületeket építsen, amelyek megfelelnek az 508. szakasz, az ADA és a WCAG AA vagy AAA irányelveinek.

Javaslatok Motor

Automatikus módon a színek fokozatosan igazodnak a HSL koordináták mentén, hogy megtalálják a legközelebbi alternatívákat, amelyek megfelelnek a kontraszt arány kritériumoknak.

Teljesen Kliensoldali

A számítások helyben, a böngészőjében futnak. Semmilyen szín, fájl vagy telemetriai koordináta nem kerül továbbításra szervereinkre.

Kapcsolódó Színes Eszközök

HEX RGB HSL Színkonvertáló
Színek konvertálása és világosság koordináták beállítása.
Képek Color Picker
Színpaletták kinyerése tervezési makettekből.
CSS Színkonvertáló
Konvertáljuk a CMYK, HSV, RGB, HSL és HEX formátumokat.

Színkontraszt Ellenőrző

Számolja ki a WCAG kontraszt arányát az előzmény és háttér színekhez, és jeleníti meg a közös szövegméretű eredményeket.

Bemenet
Két érvényes CSS szín és opcionális előzetes szöveg.
Kimenet
A WCAG AA és AAA átlépő vagy hiányzó mutatókkal való kontraszt arány.
Valódi korlátozások
A számítás csak a fény kontrasztot fedezi; nem tanúsítja a betűtípusok, mozgás, fókusz vagy színtelen szalagok interfészét vagy számláját.
Adatvédelem és adatkezelés
Két érvényes CSS szín és opcionális előzetes szöveg feldolgozása ebben a böngésző lapban. konverter nem kapja meg vagy tárolja; bezárása vagy újratöltése az oldalon tisztítja a működési állapot, kivéve, ha az eszköz kifejezetten helyi letöltést kínál.

Hogyan használjuk ezt az eszközt

  1. Két érvényes CSS színt és opcionális előzetes szöveget biztosít a szerszámvezérlésekben.
  2. Válassza ki azokat a beállításokat, amelyek a WCAG AA és AAA átjáró vagy hibás mutatókkal való kontraszt arányt érintik, majd futtatja az eszközt.
  3. Ellenőrizze a kontraszt arányt a WCAG AA és AAA át vagy hibás mutatók előtt másolja vagy letölti.

Gyakori hibák

A hibás színeket nem lehet mérni, és a határozott háttér nélkül az átláthatóság jelentéktelenül teszi az arányt.

Gyakorlati példa

Összehasonlítsa a #ffffff-on a #1f2937 szöveget, hogy megvizsgálja annak arányát a normál és a nagy szöveghez.