WCAG kontrasztellenőrző
Teszteljen minden előtér- és háttérszínpárt a WCAG 2.1 kontrasztarányra (1-től 21-ig). Tekintse meg az AA- és AAA-szintű, normál szövegek, nagyméretű szövegek (18 pt+ vagy 14 pt félkövér) és a felhasználói felület összetevőinek megfelelt/nem sikerült. Alapvető fontosságú a gombok, hivatkozások és űrlapcímkék szállítása előtt — sok márkapaletta meghibásodik, amíg nem sötétíti a szöveget vagy világosítja a felületeket.
Szövegszín
Háttérszín
Aa Bb Cc — 123
Eredmény
16.12 : 1
AA — Megfelelt
AA (nagy szöveg) — Megfelelt
AAA — Megfelelt
AAA (nagy szöveg) — Megfelelt
A színkontraszt ellenőrzése
1. Írd be vagy válaszd ki az előtér (szöveg) és a háttér színét.
2. Olvassa el a kontrasztarányt (pl. 4,52:1).
3. Ellenőrizd az AA és AAA sorokat normál és nagy szövegméretekhez.
4. Állítsd be a HSL világosságát, amíg el nem éri a kívánt szintet, majd másold a hexadecimális értékeket.
Kontraszt-ellenőrzési példák
törzsszöveg #374151 a #FFFFFF-en
Arány ≈ 8,9:1 — normál szöveg esetén nem teljesíti az AAA-t: 1). Kényelmes, hosszú formátumú olvasás.
Világosszürke #9CA3AF fehéren
Arány ≈ 2,6:1 — normál szöveg esetén nem működik az AA (4,5:1 kell). Gyakori helyőrző hiba.
Elsődleges gomb fehér #2563EB
Arány ≈ 4,6:1 — átadd az AA normál szöveget; ugrás sötétkékre az AAA vagy csak nagy méretek használatához.
Mikor használd ezt az eszközt
• Amikor a tervezési rendszerjogkivonatokat kiadás előtt auditálja.
• Amikor kijavítja a Lighthouse-ból vagy az axe-ból származó kisegítő lehetőségeket.
• Amikor olyan linkszíneket választ, amelyeknek el kell térniük a törzsszövegtől, nem csak színárnyalatban.
Mikor válassz mást
• Ha teljes oldal-ellenőrzésre van szüksége — használjon automatizált szkennereket a renderelt DOM-on.
• Nem szilárd hátterek (képek, színátmenetek) tesztelésekor — vegyen mintát a legrosszabb eset képpontjaiból.
• A színvakság szimulálásakor használjon speciális látásszimulátorokat.
WCAGIT 2.1. magyarázva
A szint a minimum; Az AA számos joghatóság jogi célpontja (ADA, EAA állami szektor). Az AAA törekszik a törzsmásolatra — a nagy címsorok könnyebben átadhatják az AAA-t, mint a 14 képpontos feliratok. A látható fókuszjelzők (2.4.7) kiegészítik a kontrasztot — a billentyűzet használóinak látható fókuszgyűrűkre van szükségük, gyakran 3:1 arányban a szomszédos színekkel szemben. Minden tokenpár mellett add meg a megfelelő/sikertelen dokumentumot a tervezési rendszerében.
Hibák kijavítása márkaváltás nélkül
Ha a márka lila fehéren nem működik, ne cserélje fel az árnyalatot — sötétítse az előteret 5–10%-os világossági lépésekkel, vagy használd a lilát csak a nagy címsorokhoz. A helyőrző szövegnek meg kell felelnie a kontrasztnak (4,5:1), nem csak a bemeneti értékeknek. A letiltott állapotok mentesülhetnek a szigorú szövegkontraszt alól, de nem szabad csak színnel közvetíteni a kritikus információkat. Párosítsa ezt az ellenőrzőt a színátalakítóval a gyors HSL-iteráció érdekében.
Gyakori kérdések
Milyen kontrasztarányú WCAG AA normál szöveg esetén?
Legalább 4,5:1 normál szöveg és 3:1 nagy szöveg esetén (18 pt+ vagy 14 pt félkövér).
Mi az AAA?
7:1 normál szöveg, 4,5:1 nagy szöveg — szigorúbb, gyakran használják kormányzati oldalakon.
Kell a felhasználói felület összetevőinek kontraszt?
A WCAG 2.1 3:1 arányt ír elő a grafikus objektumokhoz és a felhasználói felület komponenshatáraihoz (1.4.11).
Hogyan számítják ki az arányt?
Az sRGB színek relatív fénysűrűsége alapján: (L1 + 0,05) / (L2 + 0,05), ahol az L1 világosabb.
Alacsony kontraszt javítása linkek?
Nem — a kontraszt továbbra is szükséges. Az aláhúzások segítik a nem színjeleket, de nem helyettesítik az arányszabályokat.
Az adataimat szerverre küldik?
Nem.
Ingyenes ez az eszköz?
Igen.