A fehér alapon világosszürke szöveg egy pillantásra elegánsnak és minimalistának tűnhet – és teljesen olvashatatlan a látássérült, erős napfény a képernyőn, vagy a hétköznapi szem megerőltetése miatt a munkanap végén. A színkontraszt a hozzáférhetőség egyik „technikai” kritériuma – pontos számokat kell teljesíteni –, de az egyik legkönnyebben tesztelhető és előre javítható is.
Röviden: miről szól ez az útmutató
Milyen arányokat igényel a WCAG
A WCAG a kontrasztarányt 1:1 (egyáltalán nincs kontraszt – azonos szín) és 21:1 (a lehető legnagyobb kontraszt – tiszta fekete a tiszta fehéren) közötti számként határozza meg. Az AA szinten (a legtöbb helyen, beleértve Izraelt is) a követelmény legalább 4,5:1 arányú a normál szöveg és a mögötte lévő háttér között. A szigorúbb AAA szinten a követelmény 7:1-re emelkedik.
Miért megengedett a nagy szöveg kisebb kontrasztja?
A nagy szöveg még alacsonyabb kontraszt mellett is olvasható marad, ezért a WCAG könnyebb küszöböt állít be: AA szinten 3:1 (4,5:1 helyett), és 4,5:1 AAA szinten (7:1 helyett). A "nagy szöveg" 18 pontos vagy nagyobb (körülbelül 24 képpont), vagy 14 pontos vagy nagyobb (körülbelül 18,7 képpont) szöveg, ha félkövér. A nagy címsorok például valamivel alacsonyabb kontrasztot „engedhetnek meg maguknak”, mint egy normál törzsbekezdés, és így is megfelelnek a követelményeknek.
A kontrasztarány ellenőrzése a gyakorlatban
Nem kell manuálisan kiszámolni – az olyan ingyenes eszközökkel, mint a WebAIM Contrast Checker, megadhatja a szöveget és a háttér színkódját, és azonnal megkaphatja a pontos arányt, valamint minden szinten megfelelő/nem teljesített pontszámot. Nem csak a szilárd háttéren lévő szöveget érdemes ellenőrizni, hanem a háttérképek vagy színátmenetek feletti szöveget is – ahol a kontraszt ugyanannak a képnek a különböző területei között változhat, ezért a legjobb a „legproblémásabb” helyet tesztelni.
💡 Gyakorlati tipp
Nem csak szöveg: ugyanaz a kontrasztkövetelmény (egyszerűbb küszöbértékkel, 3:1) vonatkozik a grafikus felhasználói felület összetevőire is, mint például az űrlapmezők körvonalai, funkcionális ikonok és gombszegélyek – nem csak a betűkre.
Hogyan válasszunk előre hozzáférhető színpalettát
A leghatékonyabb módszer a kontraszt ellenőrzése a sablontervezési szakaszban , nem minden dokumentumban külön-külön. A címsorok, a törzsszöveg és a linkek márkaszínének kiválasztásakor érdemes előre megbizonyosodni arról, hogy minden ténylegesen használt szöveg-háttér kombináció megfelel legalább 4,5:1 aránynak. Így a sablonból létrehozott minden új dokumentum automatikusan "örökli" a megfelelő kontrasztot, ahelyett, hogy minden dokumentumot külön ellenőrizne, miután már megírták.
Tudni szeretné, hogy dokumentumai megfelelnek-e a kontrasztra vonatkozó követelményeknek?
Eszközünk ellenőrzi a színkontrasztot a webhelyén található minden PDF-fájl automatikus vizsgálatának részeként.
Ingyen átvizsgálja webhelyét ←