Színkontraszt
A színkontraszt azt méri, mennyire különül el a szöveg vagy vizuális elem a hátterétől. A megfelelő kontraszt alapvető az olvashatósághoz és a WCAG megfeleléshez.
Röviden
A színkontraszt azt méri, mennyire különül el a szöveg vagy vizuális elem a hátterétől. A megfelelő kontraszt alapvető az olvashatósághoz és a WCAG megfeleléshez.
Vizuálisan
A vizuális elegancia nem mehet az olvashatóság rovására
Ugyanazt a helyzetet kétféleképp nézd meg: először a tipikus hibát, utána azt a megoldást, amelyik jobban támogatja a felhasználó feladatát.
×
GYAKORI HIBA
Halvány szürke szöveg fehéren
Fontos információ a következő lépéshez.
Másodlagos magyarázat.
A gyenge kontraszt normál látás mellett is fárasztó lehet, gyengénlátásnál pedig a tartalom részben eltűnhet.
✓
HELYES IRÁNY
Megfelelő kontraszt ugyanabban a vizuális rendszerben
Fontos információ a következő lépéshez.
Másodlagos magyarázat.
A másodlagos szöveg visszafogott maradhat úgy is, hogy olvashatósága nem esik szét.
Mit jelent a színkontraszt?
A színkontraszt azt méri, mennyire különül el a szöveg vagy vizuális elem a hátterétől. A megfelelő kontraszt alapvető az olvashatósághoz és a WCAG megfeleléshez.
A halvány szürke szöveg lehet esztétikailag visszafogott, de ha a kontraszt túl alacsony, fontos információ válhat nehezen olvashatóvá.
A legfontosabb alapelvek
- Normál szövegnél WCAG AA célként legalább 4.5:1 kontraszt.
- Nagy szövegnél az AA küszöb 3:1.
- Interaktív állapotot ne csak szín különböztessen meg.
- Valódi háttérrel mérj.
Gyakorlati példa
Fehér háttéren a #A0A0A0 jellegű világos szürke sok body szövegnél már gyenge lehet. A design tokeneket érdemes kontrasztméréssel validálni, nem szemre.
Alacsony és megfelelő szövegkontraszt
Túl halvány szöveg
Jól olvasható szöveg
Gyakori hibák
- Placeholder-kontrasztot body szövegként kezelni.
- Színes szöveget színes háttéren teszt nélkül használni.
- Csak monitoron, egy fényviszonyban ellenőrizni.
Hogyan alkalmazd a saját felületeden?
Ne izolált szabályként kezeld a témát. A színkontraszt akkor működik jól, ha a felhasználó céljával, a tartalom fontossági sorrendjével és a teljes felület többi döntésével együtt vizsgálod.
Teszteld valós feladattal: adj a felhasználónak konkrét célt, figyeld meg, hol bizonytalanodik el, mit ért félre, és mely pontokon kell indokolatlanul gondolkodnia. A jó UI/UX döntés nem attól jó, hogy látványos, hanem attól, hogy kiszámíthatóbbá és könnyebbé teszi a feladat elvégzését.
A vizuális minőség és a használhatóság nem egymás ellenfelei. A jó felület mindkettőt ugyanannak a felhasználói célnak rendeli alá.
Gyakorlati accessibility ellenőrzés
Az automata accessibility scanner hasznos első szűrő, de nem elég. Menj végig az oldalon csak billentyűzettel, ellenőrizd a fókuszsorrendet és fókuszjelzőt, zoomolj, próbáld megérteni a formot vizuális színjelzések nélkül, és ahol lehet, tesztelj képernyőolvasóval is.
A WCAG sikerességi kritériumai mérhető minimumokat adnak, de a megfelelés nem automatikusan jelent kiváló UX-et. Egy technikailag szabályos kontroll továbbra is lehet félreérthető vagy nehézkes, ezért a szabványellenőrzést használhatósági teszttel érdemes kiegészíteni.
- Tabbal minden funkció elérhető-e
- látható és nem kitakart-e a fókusz
- szín nélkül is érthetők-e az állapotok és hibák
- zoom és nagyított szöveg mellett is használható-e a felület
Gyakori kérdések
Miért fontos a színkontraszt?
A halvány szürke szöveg lehet esztétikailag visszafogott, de ha a kontraszt túl alacsony, fontos információ válhat nehezen olvashatóvá.
Mikor érdemes tesztelni?
Már korai wireframe vagy prototípus szinten is. Minél később derül ki egy alapvető használhatósági probléma, annál drágább lehet a javítása.
Források és további olvasnivaló
Az accessibility és usability állításoknál elsődleges szabványokra és bevett szakmai forrásokra támaszkodj; a konkrét interface-döntéseket pedig mindig a saját felhasználói kontextusodban teszteld.