Nagy szín kontraszt használata a könnyebb tervezéshez
A magas visszafordulási arányt gyakran a weboldal rossz vizuális elérhetősége okozza. Ha a betűtípusok túl kicsi, vagy alig olvashatók, ha túl sok zavaró tényező van, vagy nincs elég hely, sok ember csak hagyja el az oldalt egy második gondolat nélkül.
A korai elhagyás egyik leggyakoribb oka a rosszul választott az olvashatóságot csökkentő színsémák tartalmát.
A WHO statisztikái szerint mintegy 285 millió látássérült ember van szerte a világon, akik közül sokan részben vagy teljes mértékben vakok. A vizuális fogyatékos emberek másképp látják a színeket az alacsony szín kontraszt elkerülése mintáinkban elkerülhetetlen, ha ügyfeleink számára elérhető és felhasználóbarát honlapot kívánunk biztosítani.
Webes szabványok a szín kontraszthoz
Szín kontrasztarány a két szín kontrasztjának különbségét méri. Minél nagyobb az érték, annál könnyebb megkülönböztetni az objektumot (szöveg, kép, grafika) az előtérben a háttérben.
A színek sokféleképpen ellentétesek lehetnek, mint például a színárnyalat, érték és telítettség. A szín kontrasztarányt a W3C, a világháló legjelentősebb nemzetközi szervezete adja meg.
Egy értéket vehet igénybe 1: 1 (nincs ellentét, az előtér és a háttér azonos színű) és 21: 1 (a maximális kontraszt csak fekete-fehér között létezik).
A W3C legújabb webtartalom-hozzáférhetőségi irányelvei (WCAG) 2.0 a webfejlesztőknek és a tartalomkészítőknek a minimális (AA szint) és a megnövekedett (szint AAA) értékek számára elfogadható szín kontrasztarányú referenciaértékeket biztosítanak.
Az AA szint legalább legalábbis szükséges 4,5: 1 arány a normál szöveghez, és 3: 1 nagy szöveg esetén. Sokkal könnyebb olvasni a nagy szöveget, mint a feliratokat, ezért alacsonyabb szín kontraszt szükséges.
Ha azt szeretné elérni, hogy az AAA szint magasabb legyen, meg kell terveznie a színsémáját nagyobb gondossággal, mivel legalábbis szükséges 7: 1 kontrasztarány a normál szöveghez, és 4,5: 1 nagy. Ha a szöveg egy logó vagy márkanév részét képezi, a WCAG szintjén nincs minimális szín kontraszt.
Csak olyan webhelyet hívhatunk, amely vizuálisan elérhető, ha a a szín kontrasztarány minden előtér objektum és annak háttere között eléri az AA szintet.
A magas szín kontrasztarány előnyei
A jobb olvashatóság biztosításával nemcsak a látássérülteket használják, hanem az is azok, akik kis képernyőkön olvasják a tartalmat például egy okostelefonon vagy egy okostelefonon rossz fényviszonyok, és tovább alacsonyabb minőségű monitorok.
Az emberek gyorsabban olvassák, ha nagyobb a kontraszt a szöveg és a háttér között, így valószínűleg több időt vesz igénybe, amíg az oldalak tartalma unalmas lesz.
Ha aggódsz, hogy a nagyobb kontrasztarány alkalmazása negatív hatással lesz a design esztétikájára, meg kell nézni a Contrast Rebellion webprojektet, amely a valóságos példákkal bizonyítja, hogy a magas kontraszt arány szabályainak betartása még mindig eredményezhet vonzó és hűvös kivitelben.
Alkalmazások a színes kontraszt ellenőrzéséhez
Számos nagyszerű ingyenes eszköz áll rendelkezésre az interneten, amelyek segíthetnek a tervezőknek a webhelyük szín kontrasztarányának ellenőrzésében.
A szín kontraszt kialakításának tesztelésének legegyszerűbb módja, hogy a Photoshop vagy a megfelelő böngészőbővítmény használatával kiválaszthatja a fő színeket a Firefoxhoz, és másolja az értékeket az alábbi alkalmazások egyikébe.
A legfontosabb, hogy emlékezzünk rá, hogy mindig szükséged van rá hasonlítsa össze az előtér színét, például a szöveg színét a környező területhez (háttérszín).
1. WebAim szín kontraszt ellenőrző
A WebAim (Web Accessibility In Mind) egy olyan szervezet, amely elősegíti a webes hozzáférhetőséget, amely egyszerű, de megbízható szín kontraszt-ellenőrzőt kínál a fejlesztőknek számos más nagyszerű hozzáférési eszköz, például a Wave, egy általános hozzáférhetőség-értékelési alkalmazás, amely segíthet Önnek gyorsan értékelje webhelye akadálymentesítési problémáit.
A WebAim Color Contrast Checkerje megmondja ha a színei átadják a WCAG AA és AAA teszteket, mind a normál, mind a nagy szövegek esetében.
2. Snook szín kontraszt ellenőrzése
Jonathan Snook, aki jelenleg a Shopify vezető front-fejlesztőjeként dolgozik, több mint egy évtizede tárolja a praktikus szín kontraszt-ellenőrző eszközt. Snook alkalmazás lehetővé teszi módosítsa a HSL és az RGB értékeket az előtér és a háttérszín egyenkénti használatával kényelmes tartományvezérlők addig, amíg el nem éri az eredményt, amely megfelel a WCAG 2.0 referenciaértékeknek.
CheckMyColours
A Giovanni Scala által létrehozott CheckMyColours lehetővé teszi, hogy ellenőrizze az összes előtér-háttér színkombináció szín kontrasztarányát élő webhelyen.
Kiszámítja fényerő kontrasztarány, fényerő-különbség, és színkülönbség, és teljes jelentést nyújt az eredményekről. A CheckMyColours jelentés jelentősen megkönnyíti az Ön megértését arról, hogyan javíthatja webhelyének láthatóságát.
Színséma tervező
A színséma-tervező nem különösebben szín kontraszt-ellenőrző, hanem eszköz teljes színsémák tervezése.
Ezt a gyűjteménybe is beillesztjük, mert olyan funkcióval rendelkezik, amely lehetővé teszi, hogy megnézze, hogyan érzékelik a színsémát a különböző típusú vizuális fogyatékossággal élő emberek. A színeket a teljes színvakságra, a protanopiára, a deuteranopiára és sok más látássérülésre tesztelheti. Az alkalmazásnak van egy újabb verziója, a Paletton, ami még egy kifinomultabb látásmodulációt tesz lehetővé (akkor is tesztelhet olyan dolgokat, mint a rosszul megjelenő LED-ek vagy a gyenge CRT-kijelző).
A W3C egy hatalmas web-hozzáférhetőség-értékelési eszközök listáját is kínálja, ahol sok más szín kontraszt-eszközt találhat, mint például ez a hasznos kisegítő eszköz..
Tippek a vizuálisan hozzáférhető webhelyek létrehozásához
Ha vizuálisan elérhető webhelyet szeretne létrehozni, mindig jó ötlet ne használjon színt egyedül a funkcionalitás vagy a jelentés átadásához. Ilyen például a jelenlegi állapotuk színét módosító ikonok.
Ha ez lehetséges, mindig további vizuális jelek tervezése amelyek segítik a színeket másképp látó funkciókat.
Soha ne felejtsd el fordítson különös figyelmet a gombok, linkek és menük szín kontrasztjára, mivel ezek a webhely navigációs eszközei. Ha a felhasználók nem tudnak könnyen navigálni a webhelyén, akkor gyorsan elvesznek. Hozzáférhető színek a művelethez szükséges gombokhoz is kulcsfontosságú a jó átváltási árfolyamok szempontjából.
Jó munkafolyamat-gyakorlat a szín kontraszt arányának a tervezési folyamatban a lehető leghamarabbi tesztelése, mivel nehéz lesz meggyőzni az ügyfelet, hogy később változtassa meg a webhely színsémáját..
Most olvassa el: Praktikus megközelítés a honlap színrendszerének kiválasztásához
