Hogyan ellenőrizhetem, hogy a szöveg- és háttérszíneim megfelelnek-e a WCAG előírásainak?

Adja meg a hex kódokat a Szövegszín és Háttérszín mezőben, vagy használja a színválasztókat. A Kontrasztarány mellett Megfelelt vagy Nem felelt meg jelenik meg az AA és AAA szintű normál és nagy szöveghez, valamint a felhasználói felületi elemekhez.

Milyen kontrasztarányt ír elő a WCAG AA szint?

Az AA szinthez normál szövegnél 4,5:1, nagy szövegnél 3:1 kell. Az AAA szinthez normál szövegnél 7:1, nagy szövegnél 4,5:1 kell. A felhasználói felületi elemekhez és grafikus objektumokhoz 3:1 szükséges.

Mi számít nagy szövegnek?

Az eszköz a 18 pt (24 px) normál, vagy 14 pt (18,66 px) félkövér szöveget tekinti nagynak. A kisebb szövegeknek a magasabb, normál szövegre vonatkozó küszöbértékeket kell teljesíteniük.

A színeim nem felelnek meg az AA szintnek. Hogyan javíthatom ki őket?

Használd az egykattintásos Szövegszín javítása vagy Háttér javítása javaslatokat. Ezek a világosságot állítják, miközben megtartják az eredeti színárnyalatot, amíg a páros el nem éri a 4,5:1 arányt.

Milyen színformátumokat fogad el, és választhatok a képernyőről?

Elfogad 3 és 6 számjegyű hex értékeket, például #abc vagy #1e293b. A Szín kiválasztása a képernyőről gomb megjelenik az EyeDropper API-t támogató böngészőkben, mint a Chromium.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül.

🌓

Ingyenes WCAG színkontraszt-ellenőrző

Ellenőrizd, hogy két szín megfelel-e a WCAG AA és AAA kontraszt-szabványoknak az akadálymentesítés szempontjából. Élő előnézet több szövegméretnél automatikus javaslatokkal, ha a kontraszt túl alacsony.

A böngésződben futNincs regisztráció, nincs felugró ablakNem szükséges bejelentkezésÖrökre ingyenes

Betöltés után offline is működik

Szöveg színe

Háttérszín

Nagy fejlécszöveg

Közepes törzsszöveg (18px) olvasáshoz és tartalomhoz.

Normál törzsszöveg (16px) bekezdésekhez.

Kis törzsszöveg (14px) feliratokhoz és metaadatokhoz.

14,63:1

Kontrasztarány

✓WCAG AA — Normál szöveg

Szükséges: 4.5:1 · Jelenlegi: 14,63:1

✓WCAG AA — Nagy szöveg

Szükséges: 3.0:1 · Jelenlegi: 14,63:1

✓WCAG AAA — Normál szöveg

Szükséges: 7.0:1 · Jelenlegi: 14,63:1

✓WCAG AAA — Nagy szöveg

Szükséges: 4.5:1 · Jelenlegi: 14,63:1

✓UI-komponensek / grafikus objektumok

Szükséges: 3.0:1 · Jelenlegi: 14,63:1

Gyors előbeállítások

A WCAG 2.1 kontrasztirányelvein alapul. Nagy szöveg = 18pt (24px) normál vagy 14pt (18,66px) félkövér. A HEX-kódok mindkét irányban frissülnek: írj be egy HEX-et vagy válassz színt, mindkét mező szinkronban marad.

Gyakori felhasználások

Auditálja a weboldalakat a WCAG megfelelőséghezEllenőrizze, hogy webhelye szövegszínei teljesítik-e a WCAG AA vagy AAA kontrast szabvány az akadálymentesítéshez.
Ellenőrizze a márka szín kombinációitTesztelje márkaainak szín kombinációit, hogy biztosan működjenek az elérhető UI tervezéshez.
Tesztelje a sötét mód szín palettáitA világos szöveg sötét háttéren továbbra is kontraszt elégtelensége lehet — ellenőrizze a sötét módú szín párjait itt.
Szín párok nyomtatott anyagokhozA plakátoknak, jeleknek és nyomtatott anyagoknak is szükségük van olvasható kontrasztra — különösen az idősebb nézőknek.
Tervezzen elérhető gombbszíneketBiztosítsa, hogy a CTA-k, műveleti gombik és hivatkozások megfeleljenek a WCAG-nek háttérükkel szemben.

Hogyan működik

A kontrasztellenőrzés teljesen a böngészőjében fut a WCAG 2.1 relatív fényerő algoritmusával — nincs könyvtár, nincs szerver, csak kézzel írt matematika, amely pontosan követi a specifikációt. Minden eredmény valós időben frissül, ahogy gépel vagy színt választ.

1
Hex-bemenet és normalizálás
Mind a 3-számjegyű (#abc), mind a 6-számjegyű (#aabbcc) hex értékek elfogadottak, és teljes RGB hármassá normalizálódnak. Az érvénytelen bemenet azonnal elutasításra kerül, ahelyett hogy csendben feketévé alapértelmezne, így piros keret jelenik meg egy félrevezető átment eredmény helyett.
2
WCAG fényerő-számítás
Minden szín relatív fényerővé kerül átalakításra a WCAG 2.1 képlettel: az sRGB csatornaértékek szakaszonkénti gamma-korrekcióval linearizálódnak (12,92-vel osztva 0,03928 alatt, 2,4-es hatványra emelve fölötte), majd 0,2126R + 0,7152G + 0,0722B súlyozással.
3
Kontrasztarány és megfelelőségi ellenőrzések
A kontrasztarány (világosabb + 0,05) / (sötétebb + 0,05) alapján kerül kiszámításra, és mind az öt WCAG küszöbértékkel szemben ellenőrzésre kerül: AA normál szöveg (4,5:1), AA nagy szöveg (3:1), AAA normál szöveg (7:1), AAA nagy szöveg (4,5:1) és UI komponensek (3:1). Az eredmények minden billentyűleütéskor frissülnek.
4
Árnyalat-megőrző javaslatok
Amikor a pár nem felel meg a WCAG AA-nak, az eszköz átkeresi a HSL fényerő-teret — mindkét irányba lépegetve az eredeti fényerőtől kifelé —, hogy megtalálja mindkét szín legközelebbi olyan változatát, amely megfelel a 4,5:1-nek, ugyanazt az árnyalatot és telítettséget megtartva. Az EyeDropper API (Chromium) is elérhető bármely szín közvetlen mintavételezésére a képernyőjéről.

Kapcsolódó eszközök

👁️

Színvakság-szimulátor

Nézd meg, hogyan néz ki a design a színlátási rendellenességgel élőknek. Szimulál protanópiát, deuteranópiát, tritanópiát, akromatopsziát és enyhébb rendellenességeket.

Próbálja kiA fájlok helyi maradnak

📐

Mi a képernyőfelbontásom

Lásd a képernyőd felbontását CSS és valós képpontokban, az ablakméretet, a pixelarányt, a színmélységet, a HDR-t, az érintéstámogatást és a képfrissítési frekvenciát, és másold ki az egészet.

Próbálja ki

🖥️

Hibás pixel teszt

Ellenőrizd a képernyődet hibás vagy beragadt pixelek szempontjából teljes képernyős fekete, fehér, piros, zöld, kék és szürke színnel, valamint egy opcionális beragadt pixel javítóval.