WCAG-kontraszt webshopokban: árak, gombok és űrlapmezők

Mit jelent a 4,5:1 és a 3:1?

A kontrasztarány a szöveg és a mögötte látható háttér relatív fénysűrűségének viszonyát írja le. Nem szemre adott értékelés: számítható. Egy finom szürke ár vagy egy halvány gombfelirat modernnek tűnhet, miközben rossz fényviszonyok között vagy gyengénlátó vásárlónak alig olvasható.

A WCAG 2.1 1.4.3 sikerkritériuma AA szinten normál szövegnél legalább 4,5:1 arányt kíván meg. Nagy szövegnél legalább 3:1 szükséges. Nagynak legalább 18 pontos normál vagy 14 pontos félkövér szöveg számít; a szokásos CSS-átváltással ez 24 px, illetve körülbelül 18,67 px. Egy címsor neve vagy szerepe önmagában nem teszi a szöveget naggyá.

A küszöböt nem érdemes felfelé kerekítéssel teljesítettnek tekinteni. Egy 4,49:1 érték nem 4,5:1. Hagyjon tartalékot, és ellenőrizze a ténylegesen megjelenő színpárt, beleértve az áttetszőséget és a háttérváltozatokat is. Fotóra tett szövegnél a háttér nem feltétlenül egyetlen szín.

Nem csak a betűket kell megmérni

A nem szöveges kontraszt a vezérlő azonosításához és állapotának felismeréséhez szükséges vizuális információt is érinti. Egy olyan beviteli mezőnél, amelyet kizárólag a kerete tesz felismerhetővé, a halvány keret problémát jelenthet. Ugyanez igaz egy egyedi jelölőnégyzet fontos körvonalára vagy a kiválasztott állapot jelére.

A 3:1 követelmény alkalmazása kontextusfüggő: nem minden díszítő határvonalnak kell teljesítenie. A kérdés az, hogy az adott vizuális rész szükséges-e a vezérlő vagy állapot felismeréséhez. A felület valamennyi dekoratív elemének válogatás nélküli mérése sok zajt termel, de a lényeges elemek kihagyása valódi hibát hagy rejtve.

A WCAG bizonyos kivételeket is tartalmaz, például inaktív vezérlőkre és logókban szereplő szövegre. Ezek nem általános felmentések a halvány dizájn számára. Különösen ne halványítsa el a rendeléshez még szükséges vezérlőt pusztán azért, mert átmenetileg nem kattintható.

A piros önmagában nem hibaüzenet

A megfelelő kontraszt nem oldja meg a kizárólag színnel közölt információ problémáját. A piros és zöld készletjelzés mellé kell érthető szöveg, például »Nincs készleten« és »Raktáron«. Az űrlaphibához konkrét hibaüzenet szükséges. Így a jelentés színtévesztés esetén és képernyőolvasóval is hozzáférhető marad.

A hivatkozások felismerhetőségét se bízza egy finom színkülönbségre. A folyószövegben az aláhúzás egyszerű, stabil megoldás. A fókuszjelzésnél külön vizsgálja, hogy a körvonal látható-e a gomb és az azt körülvevő felület mellett; egyetlen szín nem minden háttéren működik ugyanolyan jól.

Mérési sorrend egy webshopban

Először az üzletileg kritikus felületeket ellenőrizze: árak, termékváltozatok, kosárgomb, pénztármezők és rendelési összesítő. Ezután vizsgálja a kísérő szövegeket, a szállítási feltételeket és a hibaállapotokat. A rámutatáskor, fókuszban és kiválasztáskor megjelenő színeket külön állapotként kezelje.

A javítást célszerű közös színváltozóban megoldani, nem oldalanként eltérő árnyalattal. Így a következő fejlesztés kevésbé hozza vissza ugyanazt a hibát. A mérés után vizuális ellenőrzés is szükséges: a helyes arány nem garantál jó betűméretet, logikus elrendezést vagy érthető megfogalmazást.

• Normál szöveg: legalább 4,5:1.
• Nagy szöveg: legalább 3:1, a méretfeltételt is ellenőrizve.
• Szükséges vezérlő- és állapotjelzések: általában legalább 3:1.
• Hiba, készlet és kiválasztás: szín mellett más egyértelmű jelzés is van.
• A fókusz-, rámutatási és hibaállapotok külön ellenőrzöttek.