Színkontraszt és WCAG: mikor olvasható ténylegesen a szöveg?
A szép színpár nem automatikusan olvasható. Mérd a foreground és background relatív luminanciáját, és értsd meg a gyakori 3:1, 4.5:1 és 7:1 határokat.
Röviden
A kontrasztarány 1:1 és 21:1 között fejezi ki két szín luminanciakülönbségét. WCAG 2.x szerint normál szövegnél az AA cél általában legalább 4.5:1, nagy szövegnél 3:1.
Élő WCAG kontrasztellenőrző saját color pickerrel
Ne csak nézd — manipuláld
Színpár
Háttér
Picker megnyitása ↗
Szöveg
Picker megnyitása ↗
KONTRASZTARÁNY
7.81:1
ÉRTÉKELÉS
Kiváló kontraszt
A párosítás a WCAG AAA normál szöveges küszöbét is eléri. Ettől még valódi komponensen is ellenőrizd a vizuális kényelmet.
✓ AA normál
4.5:1
✓ AA nagy
3:1
✓ AAA normál
7:1
ÉLŐ PREVIEW
Olvasható marad valódi tartalomban?
A kontrasztarány egy küszöböt mér, de a felületet tényleges törzsszöveggel, címmel és kisebb meta szöveggel is érdemes megvizsgálni.
Elsődleges akció
Másodlagos
.example {
color: #525252;
background: #FFFFFF;
}Mit mér a kontrasztarány?
A képlet nem a hue távolságát méri, hanem a relatív luminanciát. Ezért lehet két nagyon eltérő árnyalat mégis gyenge szövegkontrasztú, ha hasonló a fényességük.
A legfontosabb WCAG 2.x küszöbök
- 4.5:1 – tipikus minimum normál méretű szövegnél AA szinten.
- 3:1 – nagyobb vagy vastag nagy szövegnél gyakori AA küszöb.
- 7:1 – normál szövegnél AAA célérték.
- A kontraszt csak egy accessibility feltétel; önmagában nem garantál jó olvashatóságot.
Nem csak szöveget kell vizsgálni
Input border, fókuszjelzés, ikonok és grafikai objektumok esetén is lehet releváns nem-szöveges kontrasztkövetelmény. A lényeg, hogy a szükséges állapot vagy információ észlelhető legyen.
A 'szép, halvány szürke' nem designrendszer, ha a felhasználó nem tudja elolvasni.
A legfontosabb WCAG kontrasztküszöbök
A WCAG 2.2 AA szinten normál méretű szövegnél legalább 4.5:1 kontrasztarányt ír elő, nagy szövegnél pedig legalább 3:1-et. Az AAA szint szigorúbb: normál szövegnél 7:1, nagy szövegnél 4.5:1 a célérték.
Ezek minimumküszöbök, nem designcélok. Egy 4.51:1 arány technikailag megfelelhet AA-nak, de ettől még egy vékony betű, gyenge kijelző vagy erős környezeti fény mellett nehezebben olvasható lehet.
A megfelelés alsó határ. Jó olvashatóságnál ne azt keresd, meddig mehetsz el éppen a minimumig.
Ne csak a szövegszínt ellenőrizd
A kontraszt a fókuszjelzéseknél, űrlapállapotoknál, ikonoknál és más UI-elemeknél is fontos. Emellett egy hibaállapotot nem szabad kizárólag piros színnel közölni: szöveg, ikon vagy más vizuális jel segít abban, hogy az információ színérzékeléstől függetlenül is érthető legyen.
A legjobb ellenőrzés ezért komponensszintű. Ne csak két HEX kódot tesztelj, hanem azt a konkrét gombot, inputot vagy kártyát, ahol a párosítás használatba kerül.
Mit jelent a WCAG-ban a „nagy szöveg”?
A nagy szöveg kategóriája nem egyszerűen azt jelenti, hogy 'ránézésre nagynak tűnik'. A WCAG legalább 18 pt-os normál vagy 14 pt-os félkövér szöveget tekint nagy léptékűnek; ez CSS-ben nagyjából 24 px, illetve 18.5 px körüli méretnek felel meg. A konkrét font metrikái ettől még számítanak, ezért design review során a tényleges megjelenést is ellenőrizd.
Ha bizonytalan vagy, biztonságosabb a 4.5:1 normál szöveges küszöböt célul venni. A kontraszt optimalizálásakor általában nincs előnye annak, hogy egy határesetet 'nagy szövegként' próbálsz átvinni.
A nem szöveges UI-elemek kontrasztja is számít
Gombok, inputok, fókuszjelzések, ikonok és más komponensek bizonyos vizuális részei is kontrasztkövetelmény alá eshetnek. Egy űrlapmező például lehet problémás akkor is, ha a placeholder szöveg olvasható, de maga a mező határa vagy fókuszállapota nem érzékelhető megfelelően.
Ezért a kontrasztauditot ne állítsd meg a body textnél. Nézd végig a fontos interaktív állapotokat: default, hover, focus, active, disabled és error.
Gyakorlati kontraszt-audit egy komponenshez
- Írd össze a komponens összes foreground/background párját, ne csak a default állapotot.
- Számítsd a tényleges kompozitált színt, ha opacity vagy áttetsző overlay szerepel.
- Ellenőrizd normál és nagy szöveges küszöb szerint a releváns feliratokat.
- Vizsgáld a fókuszjelzést és a nem szöveges vezérlőelemek kontrasztját is.
- Végül nézd meg valós eszközön és fényviszonyok között: a matematikai megfelelés mellett az emberi olvashatóság is számít.
Ha a kontraszt javításához új lépcsőt kell választanod, a színskála leckében megtanulhatod rendszerszinten kezelni az árnyalatokat.
Gyakori kérdések
A 4.5:1 minden szövegnél kötelező?
A WCAG 2.x külön kezeli a normál és nagy szöveget, valamint vannak kivételek. A gyakorlatban érdemes a kritikus tartalomnál inkább kényelmes tartalékot hagyni, nem a határértékre tervezni.
A 4.5:1 kontrasztarány minden szövegnél kötelező?
A WCAG 2.2 AA szerint normál szövegnél 4.5:1, nagy szövegnél 3:1 a minimum. Vannak kivételek, például logók és bizonyos dekoratív vagy inaktív elemek.
Gyakorold tovább
Használd a saját szín- és palettaeszközöket
Az elmélet akkor rögzül, amikor konkrét árnyalatokon és kombinációkon is kipróbálod. Ezek a kapcsolódó ByBence oldalak ugyanennek a tananyagnak a gyakorlati folytatásai.
Források és további olvasnivaló
A webes színmodelleknél és accessibility részeknél szabványokra és elsődleges dokumentációra támaszkodj. A konkrét palettadöntéseket pedig mindig a saját felületeden, valódi komponenseken teszteld.