Színkontraszt és olvashatóság ellenőrző

Az olvashatóság a szövegszín és a háttérszín közötti fényerősség-különbség. Minél nagyobb a különbség, annál könnyebb a szöveget olvasni. A túl alacsony kontraszt megnehezíti a tartalom olvasását – különösen a látássérültek, idősek vagy nehéz fényviszonyok között (pl. telefonon közvetlen napfényben).

Az Egészségügyi Világszervezet (WHO) szerint világszerte mintegy 2,2 milliárd embernek van valamilyen látási problémája. Emellett milliók színtévesztők (a férfiak mintegy 8%-a és a nők 0,5%-a), és sokan tapasztalnak életkorral összefüggő látásromlást.

Az eszköz a WCAG 2.1 (Webtartalom Akadálymentességi Irányelvek) – a nemzetközi digitális akadálymentességi irányelvek – által meghatározott képlettel számítja ki a kontrasztarányt. Az eredmény objektiív értékelést tesz lehetővé arról, hogy a színek elég olvashatóak-e, függetlenül a monitor beállításaitól vagy az egyéni színérzékeléstől.

Az eszköz a kontrasztarányt 1:1 (nincs kontraszt) és 21:1 (maximális kontraszt – fekete fehéren) közötti skálán mutatja. Az eredményt a WCAG szabványban meghatározott küszöbértékekkel vetik össze:

• Normál szöveg – legalább 4,5:1 szükséges az AA szinthez (minimális szabvány) vagy 7:1 az AAA szinthez (emelt szabvány). 18pt (24px) alatti vagy 14pt (18,5px) bold alatti szövegre vonatkozik.
• Nagy / félkövér szöveg – legalább 3:1 szükséges az AA szinthez vagy 4,5:1 az AAA szinthez. 18pt (24px)-tól vagy 14pt (18,5px) bold-tól szövegre vonatkozik – címsorok, gombok, kiemelések.
• Ikonok és UI-elemek – legalább 3:1 szükséges az AA szinthez. Ikonokra, gombokra, űrlapmezőkre és más, információt közvetítő felületi elemekre vonatkozik.

Az AA szint a minimális követelmény a digitális akadálymentességi szabályozásban sok országban, beleértve az EU webes akadálymentességi irányelvet. Az AAA szint jobb olvashatóságot biztosít, de nem mindig praktikus elérni minden elemnél.

Ha a kontraszt túl alacsony, nem kell próbálgatással keresnie a megfelelő színt. Az Illesztés funkció automatikusan megtalál egy szövegszín-változatot, amely megfelel a kiválasztott kontraszt-küszöbnek.

Hogyan működik az illesztés:

1. Válassza ki az illesztési célt a listából – pl. AA normál szöveghez vagy AAA nagy szöveghez.
2. Kattintson az Illesztés gombra.
3. Az eszköz átkeresi a szövegszín világossági változatait, és a legközelebbit javasolja, amely megfelel a követelményeknek.
4. A javasolt színt a vágólapra másolhatja, vagy azonnal beállíthatja új szövegszínként.

Az algoritmus megőrzi az eredeti szín színezetét és telítettségét, csak a világosságot változtatja meg. A javasolt szín összhangban marad a vizuális identitással, miközben megfelel az akadálymentességi szabványnak.

Hibaüzenet jelenik meg a színformátumról

Ellenőrizze a színformátumot. A HEX kódnak # jellel kell kezdődnie, és 3 vagy 6 karaktert kell tartalmaznia (pl. #fff vagy #ffffff). RGB formátum esetén ellenőrizze, hogy az értékek vesszőkkel vannak-e elválasztva, és a 0-255 tartományba esnek-e.

Az Illesztés funkció nem talál megfelelő színt

Ha a háttér és a szöveg hasonló fényerősségű ugyanabban az árnyalatban, az algoritmus nem talál olyan variánst, amely az árnyalat megváltoztatása nélkül megfelel a követelményeknek. Ebben az esetben fontolja meg a háttérszín megváltoztatását vagy egy teljesen más szövegszín választását.

A színválasztóban látható szín nem felel meg a beírt kódnak

A böngésző színválasztója csak a HEX formátumot támogatja átlátszóság nélkül. Ha RGBA vagy HSLA formátumban ad meg színt átlátszósággal, a színválasztó csak a színkomponenst jeleníti meg (alpha nélkül). A kontrasztszámítások továbbra is figyelembe veszik az átlátszóságot.

A színtévesztés a férfiak mintegy 8%-át és a nők 0,5%-át érinti. A színtévesztők nehézségekkel küzdhetnek bizonyos színpárok megkülönböztetésében, még akkor is, ha a fényerősség-kontraszt megfelelő.

A színtévesztés leggyakoribb típusai:

• Deuteranópia – nehézség a zöld és piros megkülönböztetésében (leggyakoribb forma)
• Protanópia – nehézség a piros észlelésében
• Tritanópia – nehézség a kék és sárga észlelésében (ritka)

Ez az eszköz a fényerősség-kontrasztot ellenőrzi, ami minden felhasználó számára fontos. A tervezés során azonban érdemes elkerülni a problémás színkombinációkat (pl. piros szöveg zöld háttéren), és ne támaszkodjon kizárólag a színre az információközvetítésben – használjon formákat, ikonokat és szöveget is.