WCAG kontraszt-ellenőrző
Szöveg és háttér kontrasztarányának ellenőrzése a WCAG AA/AAA szabvány szerint, normál és nagy szövegre. Élő előnézet, böngészőben, privát.
Miről szól ez az eszköz?
A WCAG kontraszt-ellenőrző megméri a szöveg és a háttér színe közötti kontrasztarányt, és megmutatja, megfelel-e a WCAG akadálymentességi szabvány AA és AAA szintjének normál és nagy szövegre. Válassz két színt, és élő előnézetben látod, mennyire olvasható a kombináció. Webdesignereknek és fejlesztőknek, akik akadálymentes, mindenki számára olvasható felületet készítenek.
Hogyan használd a(z) WCAG kontraszt-ellenőrző-t?
-
Színek megadása
Állítsd be a szöveg és a háttér színét HEX kóddal vagy a színpipettával.
-
Arány leolvasása
A nagy számként megjelenő kontrasztarány azonnal frissül, mellette az élő szövegelőnézettel.
-
WCAG kiértékelés
A négy szint (AA/AAA × normál/nagy) zöld pipával vagy piros kereszttel jelzi a megfelelőséget.
-
Finomítás
Módosítsd a színeket, amíg eléred a kívánt szintet; a csere gomb felcseréli az elő- és hátteret.
Mikor van rá szükséged?
-
Akadálymentesség
Annak biztosítása, hogy a szöveg gyengénlátók és színtévesztők számára is olvasható legyen.
-
Designrendszer
Márkaszínek és szövegszínek párosításának ellenőrzése, mielőtt bekerülnek a stílusrendszerbe.
-
Jogi megfelelőség
Az EU akadálymentességi irányelve (EAA) és sok közbeszerzés WCAG AA megfelelőséget vár el.
-
Gombok és linkek
Az interaktív elemek és állapotaik (hover, focus) kontrasztjának validálása.
WCAG kontraszt-küszöbök
| Szint | Normál szöveg | Nagy szöveg |
|---|---|---|
| AA (minimum) | 4,5:1 | 3:1 |
| AAA (kiemelt) | 7:1 | 4,5:1 |
| Nem szöveges (UI, ikon) | 3:1 | 3:1 |
Miért fontos a kontraszt?
A szöveg olvashatósága nagyban függ a betű és a háttér közötti kontraszttól. A gyengénlátók, az időskori látásromlással élők és a színtévesztők számára az alacsony kontrasztú szöveg gyakran teljesen olvashatatlan – de még a jó látásúaknak is fárasztó erős napfényben vagy gyenge kijelzőn. A megfelelő kontraszt tehát nem csupán szabványkövetés, hanem alapvető használhatósági kérdés.
A WCAG (Web Content Accessibility Guidelines) a webes akadálymentesség nemzetközi szabványa, amely mérhető küszöbökhöz köti a kontrasztot. Az AA szint a gyakorlati minimum, amit a legtöbb jogszabály (köztük az EU akadálymentességi irányelve) elvár; az AAA a kiemelten hozzáférhető tartalom célja. A küszöbök a betűméretet is figyelembe veszik, mert a nagyobb szöveg alacsonyabb kontraszt mellett is olvasható.
Hasznos tippek
-
Törekedj legalább AA-ra (4,5:1) a törzsszövegnél – ez a gyakorlati és jogi minimum a legtöbb projektnél.
-
Nagy vagy félkövér címeknél elég a 3:1, de a hosszú olvasószövegnél mindig a szigorúbb értéket célozd.
-
Sötét módban külön ellenőrizd a kontrasztot – ami világos háttéren megfelel, az sötéten nem feltétlenül.
-
Ha épphogy elbuksz egy szintet, a háttér enyhe sötétítése vagy a szöveg világosítása gyakran elég a javításhoz.
Gyakori kérdések
- Az AA szint normál szövegnél 4,5:1, nagy szövegnél 3:1; az AAA szint 7:1, illetve 4,5:1 nagy szövegnél.
- A legalább 18pt (kb. 24px) méretű, vagy a legalább 14pt (kb. 18,66px) méretű félkövér szöveg.
- A kontrasztarány a szöveg és a háttér világosságának (relatív luminanciájának) viszonya, 1:1 (nincs kontraszt) és 21:1 (fekete-fehér) között. Minél nagyobb, annál olvashatóbb a szöveg.
- A WCAG 2.1 AA szint normál szövegnél 4,5:1, nagy szövegnél (18pt, vagy 14pt félkövér felett) 3:1 kontrasztarányt ír elő. Az AAA szigorúbb: 7:1, illetve 5:1 nagy szövegnél (itt 4,5:1-ként jelölve).
- A WCAG 2.x hivatalos képletével: mindkét szín relatív luminanciáját kiszámolja (gamma-korrekcióval), majd a (világosabb + 0,05) / (sötétebb + 0,05) hányadost adja vissza. Ez a böngészőben, pontosan fut.
- Nem közvetlenül – a számítás tömör (nem átlátszó) színekkel dolgozik. Ha a szöveged vagy hátteret áttetsző réteggel használod, előbb számold ki a tényleges kevert színt, és azt add meg.
- Nem. A teljes számítás a böngésződben történik – semmilyen szín nem hagyja el a gépedet.