axessia.eu

A leggyakoribb hiba a szín kontrasztban: mi a gond és hogyan kerülheti el?

A szöveg és a háttér közötti elégtelenes kontraszt az egyik leggyakrabban talált akadály az akadálymentesítési vizsgálatokban. Ez a cikk bemutatja, hol megy el rosszul, mit írhat elő a WCAG, és hogyan kerülheti el azt szerkezetileg.

A szöveg és a háttér közötti elégtelen kontrasz az akadálymentesítési vizsgálatokban leggyakrabban talált hibák közé tartozik, és ugyanakkor az egyik legkönnyebben megelőzhető hiba. A probléma akkor fordul elő, amikor világosszürke szöveg fehér háttéren jelenik meg, amikor a gombok csak egy finom színváltoztatás révén látszanak, vagy amikor a helyőrző szöveg az egyetlen útmutatás egy beviteli mezőhöz. A vizuális fogyatékossággal élő emberek, valamint azok, akik képernyőt használnak fényes napfényben, számára a szöveg szó szerint olvashatatlan válik.

A WCAG 2.1 szabvány, amelyre az EN 301 549 utal, az AA szinten előírja a minimális kontrasztarányt a szöveg és az azt tartalmazó háttér között: általában 4,5:1 az átlagos szöveghez és 3:1 a nagyobb szöveghez, valamint az olyan kezelési elemekhez, mint a gombok és az űrlapmezők szegélyei. Ez technikainak hangzik, de az alapötlet egyszerű: a kontraszt nem esztétikai választás, hanem az információ közvetítésének feltétele.

Ahol a gyakorlatban probléma van

A kontrasztproblémák ritkán szándékosak. A vállalati arculati döntéseken keresztül csúsznak be, amelyek egy nagy, éles kijelzőn egy tervezői stúdióban kiválónak tűnnek, de egy átlagos kijelzőn egy átlagos felhasználó számára alig marad el a normától. Világosszürke gombszöveg egy pasztell színű háttéren a klasszikus példa. Ugyanez vonatkozik azokra a linkekre, amelyeket csak egy szín-eltérés alapján lehet felismerni, aláhúzás vagy más vizuális jel nélkül, így az színvakság emberek számára egyszerűen nem látszik, hogy kattinthatók.

Egy másik ismétlődő minta a hover-állapot: egy gomb, amely nyugalomban teljesen megfelel, de az egér mozgatásakor egy olyan színkombinációra vált, amely nincs tesztelve. Az űrlapok hibaüzenetei is gyakori hiba: piros szöveg egy világospiros háttéren konzisztensnek tűnik a vállalati arculattal, de gyakran nem éri el a szükséges arányt. Aki kíváncsi, hogy ezek a hibák saját környezetben hogy néznek ki, megtekintheti ezt néhány kérdésben láthatja, hogy a webhelye hol áll anélkül, hogy első megvásárlásaként fiók lenne szükséges.

Miért nem oldja meg az automatikus vizsgálat ezt részben, hanem teljesen

A kontrasztarányok jól mérhetők automatikusan: egy szkenner beolvassa a szöveg és a háttér színértékeit, és kiszámítja az arányt. Ez tehát az egyik kevés WCAG-kritérium, amelyet egy eszköz megbízhatóan tud tesztelni. Amit a vizsgálat nem lát, az az a kontraszt, amely egy interakcióval jön létre, például egy legördülő menü, egy olyan elemleírás, amely a fókuszaláskor jelenik meg, vagy egy állapot, amely csak a felhasználó művelete után válik láthatóvá. Pontosan ezért említi meg minden jelentés, hogy melyik rész van automatikusan tesztelve, és melyik rész igényli a kézi értékelést; a kontraszt az automatikus tesztelés erős pontja, de nem teljes kép.

Hogyan lehet ezt szisztematikusan megelőzni

A probléma tartós megelőzésének leggyakoribb módja a kontraszt rögzítése a tervezési rendszer szintjén, nem pedig oldalanként. Ha egy vállalati arculat alapszínei már a meghatározáskor a normának megfelelően vannak tesztelve, akkor egy szerkesztőnek vagy fejlesztőnek ezt nem kell többször ellenőriznie. Ez azt is megelőzi, hogy egy új oldal, egy ideiglenesen működő akciós szalagcím vagy egy kívülről vásárolt modul akaratlanul csökkentse a kontrasztarányt.

Ezenkívül célszerű a kontrasztot minden alkalommal kifejezetten figyelembe venni a webhely vizuális módosításakor, nem csak az első szállításkor. A márkaidentitás felújítása, egy új szezonális téma vagy egy módosított gombstílus olyan problémát vezethet be, amely az előző verzióban nem volt jelen. Az akadálymentesítés ebben az értelemben nem egyszerű pipálni való, hanem egy figyelempontösszefüggésben követi az alkalmazás, amely végigmegy a karbantartáson. Többet arról, hogy az ilyen folyamatos ellenőrzés a gyakorlatban hogyan működik, olvashat a az értékelés forrásának magyarázata.

Végül érdemes nemcsak a minimális normát nézni, hanem annak szándékára: mindenki, még kevésbé ideális fényviszonyok között vagy egy régebbi képernyőn is, ténylegesen meg tudja különböztetni a szöveget és a gombokat. Gyakran felmerülő kétségek, például hogy egy logónak vagy dekoratív képnek meg kell-e felelnie a kontrasztkövetelménynek, részletezve vannak a gyakrabban felmerülő kérdésekre adott válaszok.

Szeretné tudni, hogy a kontraszt és a többi ismétlődő probléma játszik-e a saját környezetében? Az ingyenes gyorskeresés erste jelzést ad erre, és a helyzetenkénti témakörből összeállított tudásbázis megmutatja, hogy ez a kérdés hogyan kapcsolódik az European Accessibility Act körüli egyéb kötelezettségekhez.

Ez a cikk általános információ, és nem jogi tanácsadás.