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.
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.
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.
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.