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 (18 pt félkövér / 24 pt 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 motorja

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ép színválasztó
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ámítsa ki a WCAG kontrasztarányokat az előtér- és háttérszínekhez, és jelenítse meg a gyakori szövegméretű eredményeket.

Bemenet
Két érvényes CSS-szín és opcionális előnézeti szöveg.
Kimenet
Kontrasztarány WCAG AA és AAA átmenő vagy sikertelen jelzőkkel.
Valódi korlátozások
A számítás csak a fényerőkontrasztot fedi le; nem tanúsítja a betűtípusok, mozgás, fókusz vagy nem szín alapú jelzések felületét vagy elszámolását.
Adatvédelem és adatkezelés
Két érvényes CSS-szín és opcionális előnézeti szöveg feldolgozása ebben a böngészőlapon. A Convertr nem kapja meg vagy tárolja; az oldal bezárása vagy újratöltése törli a munkafolyamatot, kivéve, ha az eszköz kifejezetten helyi letöltést kínál.

Hogyan használjuk ezt az eszközt

  1. Adjon meg két érvényes CSS-színt és opcionális előnézeti szöveget az eszköz vezérlőiben.
  2. Válassza ki azokat a beállításokat, amelyek befolyásolják a kontrasztarányt WCAG AA és AAA átmenő vagy hibás jelzőkkel, majd futtassa az eszközt.
  3. Tekintse át a kontrasztarányt WCAG AA és AAA átmenő vagy hibás jelzőkkel, mielőtt másolja vagy letölti.

Gyakori hibák

A hibás színek nem mérhetők, és az átlátszóság feloldott háttér nélkül értelmetlenné teheti 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.