Ellenőrizze minden szöveges és funkcionális kombináció kontrasztját valós állapotban, és a szín jelentését mindig egészítse ki szöveggel, ikonnal, alakkal vagy mintával.
A szín segít a hierarchia és a márkaidentitás kialakításában, de nem lehet a jelentés egyetlen hordozója. Egy szöveg nélküli piros mező, egy felirat nélküli zöld pont vagy egy aláhúzás nélküli szürke hivatkozás félreérthető lehet színlátási zavar, gyenge kijelző vagy közvetlen napfény esetén is. A kontrasztot a konkrét, egymással szomszédos színek között és az elem valós állapotában kell megítélni.
Az akadálymentes tervezés nem azt jelenti, hogy a weboldalt fekete-fehérre kell korlátozni. Meghatározott szöveges és nem szöveges színpárokra, az állapot jelzésére szolgáló további jelre, valamint a témák, a fókusz, a képek és a grafikonok tesztelésére van szükség. A WCAG aktuális követelményeit és a számítás módját hivatalos forrásokból ellenőrizze; a puszta vizuális benyomás vagy a szín neve nem mérés.
A szöveget a tényleges háttérhez viszonyítva mérik
Ellenőrizze a folyószöveget, a címsorokat, a hivatkozásokat, a címkéket, a placeholdereket, a hibaüzeneteket és a gombok szövegét is. A háttér lehet egyszínű, színátmenetes, fénykép vagy félig átlátszó réteg. Kép esetén tesztelje a leggyengébb pontot, vagy adjon hozzá stabil hátteret. A szövegárnyék nem megbízható helyettesítője a megfelelő színkombinációnak.
A betűméret és a betűvastagság befolyásolja a kritériumot, de ne támaszkodjon határeseti dizájnra. Az egyedi betűtípus vékonyabban jelenhet meg, és a felhasználó módosíthatja a nagyítást. A színeket engedélyezett felhasználási módú tokenekként definiálja, hogy a szerkesztő véletlenül se válasszon világos szöveget kis feliratokhoz vagy hivatkozásokhoz.
A vezérlőelemeknek és a fókusznak nem szöveges kontrasztra van szükségük
A beviteli mező szegélye, az ikon, a pipa, a grafikus kapcsoló és a fókuszjelző szöveg nélkül is funkcionális jelentést hordoz. Ellenőrizze ezeket a környezetükhöz képest és az állapotok között is a hatályos kritériumok szerint. Ha a mező beleolvad a háttérbe, a felhasználó nem feltétlenül jön rá, hová kell írnia, még akkor sem, ha a címkéje kiváló kontrasztú.
A focus állapotnak megkülönböztethetőnek kell lennie a nem fókuszált állapottól és a szomszédos színektől is. A hover nem helyettesíti a focust, és a selected nem helyettesíti a disabled állapotot. Tesztelje a komponenst különböző felületeken, mert ugyanaz a kék körvonal működhet egy fehér kártyán, és eltűnhet egy kék banneren. A design systemnek fel kell sorolnia az engedélyezett kombinációkat.
- mezőhatárok és aktív vezérlőelemek
- a funkció megértéséhez szükséges ikonok
- látható fókusz minden felületen
- az active, selected, error és disabled állapotok megkülönböztetése
Az állapotnak szöveges vagy formai megfelelővel is rendelkeznie kell
A hibát jelölje szöveggel, és kapcsolja a mezőhöz, a sikert erősítse meg üzenettel, a kötelező jelleget pedig magyarázza el szóval vagy jelmagyarázattal ellátott szimbólummal. A táblázatban ne használjon kizárólag zöld és piros cellákat. Adjon hozzá szöveget, hozzáférhető névvel ellátott ikont vagy mintázatot, amely szín nélkül is érthető marad.
A folyó szövegben lévő linket ne csak színárnyalattal különböztesse meg, hanem például aláhúzással. Hover és fókusz esetén a változást erősítse, ne szüntesse meg. Az önmagában álló ikonnak szöveges névre van szüksége, ha műveletet hajt végre. A dekoratív ikont viszont ne tegye feleslegesen észlelhetővé a kisegítő technológiák számára.
A grafikonok, térképek és képek külön adattervezést igényelnek
A diagramon kombinálja a színt a pont alakjával, a vonal típusával, mintázattal vagy közvetlen felirattal. Az adatoktól távol elhelyezett jelmagyarázat megnöveli az erőfeszítést. Adjon szöveges összefoglalót, és szükség szerint akadálymentes táblázatot. Ne növelje a színes adatsorok számát azon túl, amennyit megbízhatóan meg lehet különböztetni, csak azért, mert az eszköz palettát kínál.
A képbe ágyazott szöveg nehezen nagyítható és fordítható. Ha elkerülhetetlen, alternatívára és a végső kimeneten ellenőrzött kontrasztra van szükség. A térkép ne csak a jelölők színével közvetítsen állapotot; a helyek listája vagy a szöveges szűrők ugyanazt a feladatot teszik lehetővé annak a felhasználónak is, aki nem látja a vizuális kódot.
- az adatsorok és értékek közvetlen leírása
- forma vagy minta a szín mellett
- a fő megállapítás szöveges összefoglalása
- alternatív táblázat részletes adatokhoz
- minden témában ellenőrzött kontraszt
- az állapot jelentése szín nélkül is érthető
- a hover, a focus és a selected mint eltérő állapotok
- a végső szín ellenőrzése az átlátszóság alkalmazása után
- engedélyezett színpárok a dizájnrendszerben
A tesztelés a tokenekre, a tartalomra és a felhasználói beállításokra is kiterjed
Automatikusan ellenőrizze a szokásos kombinációkat, de manuálisan nézze át a hover, focus, error és disabled állapotokat, a modált és a dinamikus tartalmat. Tesztelje a világos és a sötét témát, a rendszer nagy kontrasztú módját és a kikapcsolt háttérképeket is. A színpipettának az átlátszóság figyelembevételével kialakuló végső színt kell mérnie, nem csupán a token értékét a forrásfájlban.
A közzétételi folyamatba építse be az engedélyezett stílusokat és az új komponensek ellenőrzését. A márkapaletta módosítása regressziós auditot igényel, mert több tucat állapotot érinthet. A felhasználói tesztelés feltárja a jelentések összetévesztését, amelyet önmagában az arány nem mutat meg. A műszaki minimum teljesítése nem garantálja a kényelmes olvashatóságot.
Gyakori kérdések
Elég csak az alapszöveg kontrasztját ellenőrizni?
Nem. Ellenőrizze a linkeket, a címkéket, a placeholdereket, a gombokat, a mezőhatárokat, az ikonokat, a fókuszt és minden interaktív állapotot a tényleges hátterükön.
Jelölhetjük a hibát piros színnel?
Igen, kiegészítésként, nem egyetlen jelzésként. Adjon hozzá érthető szöveget, programozott hozzárendelést, és szükség szerint ikont vagy más vizuális jelet.
Teljes körű-e az automatikus kontraszttesztelés?
Nem. Nem feltétlenül látja az összes állapotot, színátmenetet, képet és a szín által közvetített jelentést. Egészítse ki manuális és felhasználói ellenőrzéssel.
Források és további olvasnivaló
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
