Színkontraszt és akadálymentesség: WCAG-arányok és javítások

A világosszürke szöveg fehér háttéren letisztultnak tűnik a tervezőfájlban. Erős napfényben egy telefonon, vagy egy gyengénlátó ember számára viszont fáradságos olvasni. Ráadásul ez a leggyakoribb akadálymentességi hiba: a WebAIM Million 2026 (új lapon nyílik meg) az egymillió legnépszerűbb kezdőlap 83,9%-án talált gyenge kontrasztú szöveget, oldalanként átlagosan 34 különálló előfordulással.

A jó hír, hogy a kontraszt mérhető, a küszöbértékek egyértelműek, a javítások pedig többnyire olcsók. Ez az útmutató megadja a számokat, az ingyenes eszközöket, és egy módszert arra, hogyan javíthatók a márkaszínek anélkül, hogy elölről kellene kezdeni.

Mi a színkontrasztarány?

A kontrasztarány egy szám, amely két szín, általában a szöveg és a háttere relatív világosságát, vagyis luminanciáját hasonlítja össze. A WCAG rögzített képlettel számolja, az eredmény pedig 1:1-től (nincs különbség, fehér a fehéren) 21:1-ig (fekete a fehéren) terjed. Minél nagyobb a szám, annál könnyebb megkülönböztetni a két színt.

A képlet (L1 + 0,05) / (L2 + 0,05), ahol L1 a világosabb, L2 pedig a sötétebb szín relatív luminanciája. Kézzel soha nem kell kiszámolnia, de egy részlet fontos: csak a luminancia számít, a színárnyalat nem. Ezért lehet, hogy a zöld háttéren lévő piros szöveg élénknek tűnik, mégis rossz értéket kap.

A másik részlet, amelyről sokan megfeledkeznek, a kerekítés. A W3C 1.4.3-as kritériumhoz írt magyarázata (új lapon nyílik meg) szerint a kiszámított értékeket „nem szabad kerekíteni (például a 4,499:1 nem éri el a 4,5:1-es küszöböt)”. A #767676 szürke tehát fehéren (4,54:1) megfelel, a #777777 fehéren (4,48:1) viszont nem, pedig szemre senki sem tudná megkülönböztetni őket.

Milyen kontrasztarányt ír elő a WCAG?

Az AA szinten, amelyre a legtöbb jogszabály és szerződés hivatkozik, a normál szövegnek legalább 4,5:1, a nagy szövegnek 3:1 arány kell a hátteréhez képest (1.4.3-as sikerkritérium). A felhasználói felület elemeinek és az értelmet hordozó grafikáknak 3:1 kell a mellettük lévő színekhez képest (1.4.11). A szigorúbb AAA szint normál szövegnél 7:1-et, nagy szövegnél 4,5:1-et kér (1.4.6).

Miért éppen 4,5:1? A W3C magyarázata szerint ez az érték „ellensúlyozza azt a kontrasztérzékenység-csökkenést, amelyet a nagyjából 20/40-es látásélességnek megfelelő látásvesztéssel élő felhasználók általában tapasztalnak”. Vagyis mérsékelten csökkent látásra van beállítva, ami sok idősebb vásárlót is érint, akik soha nem neveznék magukat fogyatékossággal élőnek.

Egyes szövegek kivételt képeznek: a logók és márkanevek, a pusztán díszítő szövegek, a senki számára nem látható szövegek, az olyan képeken lévő szövegek, amelyeken jelentős egyéb vizuális tartalom is van, valamint az inaktív (letiltott) vezérlők szövegei. A logója maradhat, ahogy van. Egy bekezdés viszont, amelyet a logó halvány színével szedtek, nem.

Mi számít nagy szövegnek?

A WCAG-ben nagy szöveg a legalább 18 pontos, illetve félkövér szedésnél a legalább 14 pontos szöveg. A W3C ezt nagyjából 24 CSS-képpontra, félkövérnél 18,5 képpontra váltja át. Minden kisebb szövegnek a teljes 4,5:1 kell. A folyószöveg, a képaláírások, az űrlapcímkék, az árak és a lábléc linkjei szinte soha nem nagy szövegek, ezért nekik a magasabb arány kell.

Így néz ki ez a gyakorlatban. A #949494 szürke fehéren 3,03:1 értéket kap. Egy 28 képpontos címsornál ez rendben van, egy ugyanilyen színű, 16 képpontos bekezdésnél viszont hiba. Rengeteg webhely átmegy a címsorainál, és elbukik minden alattuk lévő szövegen.

A vékony és díszes betűtípusok külön figyelmet kívánnak. A W3C megjegyzi, hogy az élsimítás miatt „a különösen vékony vagy szokatlan betűtípusokat a felhasználói ágensek sokkal halványabb színnel jeleníthetik meg”, mint amilyet választott. Ha a márkabetűtípusa vékony változat, hagyjon tartalékot 4,5:1 fölött, ahelyett, hogy 4,51-re célozna.

Vonatkozik a kontraszt a gombokra, ikonokra, fókuszjelzőkre és diagramokra?

Igen. Az 1.4.11-es sikerkritérium (AA szint) szerint mindennek, amit látni kell egy vezérlő, annak állapota vagy egy grafika felismeréséhez, 3:1 arány kell a mellette lévő színekhez képest. Ide tartoznak az űrlapmezők keretei, a szöveges felirat nélküli ikonok, a fókuszkeretek, a jelölőnégyzetek és kapcsolók állapotai, valamint a diagramok vonalai és szeletei. A gombon belüli szövegnek továbbra is 4,5:1 kell.

• Űrlapmezők: egy világosszürke #CCCCCC keret fehéren 1,61:1 értéket kap. Ha ez a halvány vonal az egyetlen, ami mutatja, hová kell írni, az nem felel meg.
• Gombok: a WCAG nem ír elő látható keretet minden gomb körül. A W3C 1.4.11-es kritériumhoz írt magyarázata (új lapon nyílik meg) szerint határvonal csak akkor kell, ha a vezérlőt más vizuális módon nem lehet felismerni. Ha egy gomb csak a színes alakjáról ismerhető fel, ennek az alaknak 3:1 kell az oldalhoz képest.
• Ikonok: egy szöveg nélküli keresőnagyító, kívánságlista-szív vagy kosárikon 3:1-et igényel.
• Fókuszjelzők: a billentyűzetfókuszt mutató körvonalnak el kell ütnie a körülötte lévő háttértől. Az újabb fókuszkritériumokat a WCAG 2.2-ről szóló útmutatónk mutatja be.
• Diagramok: a vonaldiagramok vonalainak és a kördiagramok szeleteinek 3:1 kell, hacsak ugyanazok az értékek szövegként is meg nem jelennek.
• A letiltott vezérlők kivételt képeznek, bár a felhasználóknak így is tudniuk kell, megnyomható-e egy gomb.

A folyó szövegben lévő linkek külön esetet jelentenek. Ha csak a színük jelzi őket, aláhúzás nélkül, a W3C G183-as technikája (új lapon nyílik meg) 3:1 arányt kér a link színe és a körülötte lévő szöveg között, miközben mindkettőnek 4,5:1 kell a háttérhez képest. Három olyan színt találni, amely mindezt teljesíti, nehéz. Egy aláhúzás sokkal egyszerűbb.

Hogyan ellenőrizhetem a színkontrasztot?

Konkrét színpárokhoz használjon ingyenes kontrasztellenőrzőt, élő oldalakhoz a böngésző fejlesztői eszközeit, a problémás részek webhelyszintű feltérképezéséhez pedig automatikus vizsgálatot. Utána szemmel ellenőrizze, amit az eszközök nem vesznek észre: a fotókon és színátmeneteken lévő szöveget, a rámutatási és fókuszállapotokat, a helyőrző szövegeket és a hibaüzeneteket. Ez oldalsablononként általában néhány percet vesz igénybe.

• WebAIM Contrast Checker (új lapon nyílik meg): adjon meg két hexakódot, és megkapja az arányt, megfelel/nem felel meg eredménnyel normál szövegre, nagy szövegre és grafikus objektumokra. A világosságcsúszkájával könnyen megtalálható a legközelebbi megfelelő árnyalat.
• Colour Contrast Analyser (új lapon nyílik meg): a Vispero ingyenes asztali alkalmazása Windowsra és macOS-re. A pipettájával a képernyő bármely képpontjából mintát vehet, ami a képeken lévő szövegnél, PDF-eknél és alkalmazásoknál hasznos, és színtévesztés-szimulátort is tartalmaz.
• Chrome DevTools: vizsgáljon meg egy szövegrészt, és nyissa meg a színválasztót. A kontrasztarány-szakasz (új lapon nyílik meg) az AA és AAA szintnek megfelelő vonalakat mutat, és megfelelő színt is javasolhat. A CSS Overview panel az oldal összes kontrasztproblémáját felsorolja.
• Automatikus ellenőrzők: a böngészőbővítmények és a Lighthouse egy teljes oldalon jelzik a gyenge kontrasztú szöveget, de a képeken vagy színátmeneteken lévő szöveget gyakran kézi ellenőrzést igénylőként jelölik meg, ahelyett hogy megfelelőnek vagy hibásnak minősítenék.

Ahol az eszközök nem elegendők, vegyen mintát kézzel. Egy nyitókép fotóján lévő szövegnél a kép legvilágosabb részét ellenőrizze a legvilágosabb betűk mögött; a W3C ismert hibaként tartja számon az elégtelen kontrasztú háttérképeket (F83). Vigye az egeret a gombok fölé, lépjen rájuk Tab billentyűvel, idézzen elő egy űrlaphibát, és váltson sötét módra, ha kínál ilyet. A sötét téma is elbukhat: a #757575 szürke #121212 háttéren 4,07:1 értéket kap. A weboldal akadálymentességének teszteléséről szóló útmutatónk a kontrasztot a többi gyors kézi ellenőrzés mellé helyezi.

Hogyan javíthatom a gyenge kontrasztot a márkaarculat megváltoztatása nélkül?

Általában úgy, hogy a szöveghez és a kis elemekhez a márkaszín egy sötétebb árnyalatát veszi fel, az eredetit pedig megtartja a nagy címsorokhoz, a hátterekhez és az illusztrációkhoz. Sok márkaszín csak kis méretben bukik el. Világos márkaszínen gyakran elég a fehér szöveget sötétre cserélni, és a legtöbb látogató csak annyit vesz észre, hogy az oldal könnyebben olvasható.

1. Készítsen minden márkaszínből szövegbiztos változatot, amely a fő hátterekhez képest legalább 4,5:1, és ezt használja a folyószöveghez, a linkekhez és a kis ikonokhoz.
2. Az eredeti élénk színt használja a nagy címsorokhoz (ott elég a 3:1), a hátterekhez, az illusztrációkhoz és a díszítéshez.
3. Világos márkaszíneken cserélje a gombszöveget fehérről sötétre.
4. A fotókon lévő szöveg mögé tegyen tömör vagy félig átlátszó panelt.
5. Ellenőrizzen minden állapotot: rámutatás, fókusz, meglátogatott, kijelölt, hiba és helyőrző.
6. A megfelelő színpárokat mentse el design tokenként vagy témabeállításként, hogy az új oldalak örököljék őket, ahelyett hogy újra kitalálnák.

Tervezés színtévesztőknek: miért nem elég önmagában a szín

A kontraszt és a szín két külön probléma. A Colour Blind Awareness (új lapon nyílik meg) szerint nagyjából minden 12. férfi és minden 200. nő él színlátási zavarral, leggyakrabban vörös-zöld színtévesztéssel. A WCAG 1.4.1 (új lapon nyílik meg) (A szint) szerint a szín nem lehet az információközlés egyetlen vizuális eszköze, ezért párosítsa szöveggel, ikonnal, mintázattal vagy aláhúzással.

• Űrlaphibák: önmagában a piros keret nem felel meg. Tegyen a mező mellé üzenetet, például „Adja meg az irányítószámot”, ideális esetben ikonnal.
• Készlet és állapot: egy termék melletti zöld vagy piros pötty sok vásárlónak semmit sem mond. Írja ki: „Raktáron” vagy „Elfogyott”.
• Diagramok: a színegyeztetésre épülő jelmagyarázatot nehéz olvasni. Lássa el közvetlenül felirattal a vonalakat, vagy használjon mintázatokat és eltérő vonalstílusokat.
• Linkek: a folyó szövegben húzza alá őket, a fent leírt okok miatt.

Ha saját szemével szeretné látni a problémát, a Chrome DevTools képes látáskárosodásokat szimulálni, és a Colour Contrast Analyserben is van szimulátor. A kontraszt itt is segít: az arány a világosságot méri, nem a színárnyalatot, így két erős kontrasztarányú szín akkor is megkülönböztethető marad, ha az árnyalatuk hasonlónak tűnik. Arról, hogyan állítják be eszközeiket a gyengénlátók és más károsodással élők, a fogyatékossággal élők webhasználatáról szóló cikkünkben olvashat.

Elég a nagy kontrasztú mód és a kontrasztkapcsoló?

Nem. Az operációs rendszer kontrasztos témái és az oldalon belüli kontrasztkapcsolók azoknak segítenek, akik tudják, hogy nagyobb kontrasztra van szükségük, és bekapcsolják. A WCAG viszont az oldal alapállapotát vizsgálja, így azoknak a színeknek, amelyeket minden látogató elsőként lát, továbbra is meg kell felelniük. A kapcsoló plusz lehetőség azoknak, akik többet szeretnének, nem a hibás színek javítása.

Egyes fogyatékossággal élők a Windows kontrasztos témáit használják, amelyek a saját színeikre cserélik az Önéit. Érdemes bekapcsolt kontrasztos témával is tesztelni a webhelyét: a háttérképekből épített ikonok eltűnhetnek, és a csak árnyékkal (box-shadow) rajzolt fókuszstílusok is elveszhetnek. A CSS prefers-contrast médialekérdezésével ráadásul nagyobb kontrasztú változatot kínálhat azoknak, akik ezt a rendszerbeállításaikban kérték.

Saját widgetünkben is van kontrasztbeállítás és színtévesztőknek szóló profil, és egyes látogatók hasznosnak találják őket. Ugyanazt mondanánk mégis: ha a folyószövege #999999 színű fehér háttéren, módosítsa a CSS-t. A widget módot ad annak a látogatónak, aki nagyobb kontrasztot szeretne, hogy megkapja. A hibás alapértelmezett színeket nem teszi megfelelővé, és ezt a dokumentációnk WCAG-összefoglalója is kimondja.