Hogyan auditáljuk a színkontrasztot telepítés nélkül

A színkontraszt-auditot gyakran speciális akadálymentességi feladatként kezelik: megnyitni egy designfájlt, telepíteni egy plugint, képernyőképeket exportálni, jelentést futtatni, vitatkozni a márkaszínekről. Ez hasznos lehet, de a legtöbb csapatnak nem itt érdemes kezdenie.

Egy éles webhely esetében a leggyorsabb megbízható auditot általában abban a böngészőben lehet elvégezni, amely már amúgy is nyitva van. A modern böngésző DevTools eszközei képesek megvizsgálni a számított színeket, megmutatni a kontrasztarányokat, feltárni az állapotstílusokat, és segítenek tesztelni azokat a kényes eseteket, amelyeket az automatizált jelentések elmulasztanak.

Ez az útmutató abból indul ki, hogy nem telepít semmit. Nincsenek böngészőbővítmények. Nincsenek design pluginek. Nincs fizetős auditcsomag. Csak az oldal, a böngésző és egy egyszerű módszer.

A kontrasztszabályok, amelyekre ténylegesen szüksége van

A legtöbb webes munka esetében a WCAG kontraszt néhány küszöbértékre vezethető vissza:

• Normál szöveg: legalább 4.5:1 kontraszt a háttérhez képest.
• Nagy szöveg: legalább 3:1. A WCAG ezt nagyjából 24 CSS pixelként határozza meg, vagy félkövér esetén körülbelül 18.66 CSS pixelként.
• UI-komponensek és grafikus objektumok: legalább 3:1 az értelmezéshez szükséges határok, ikonok, állapotok és diagramrészek esetében.
• Emelt kontraszt: 7:1 normál szövegnél és 4.5:1 nagy szövegnél, ha az alapkövetelményen túl szeretne menni.

Vannak kivételek, például az inaktív vezérlők, a dekoratív elemek és a logók. Ezeket a kivételeket takarékosan használja. „Ez a márka része” nem kivétel; ez tervezési korlát.

Azt is tartsa szem előtt, hogy a kontraszt csak az akadálymentes színhasználat egyik része. Ha egy piros hibaállapotnak elegendő a kontrasztja, de nincs hozzá szöveg, ikonfelirat vagy programozott jelzés, akkor továbbra is problémát okozhat azoknak a felhasználóknak, akik nem tudják megkülönböztetni a pirosat a közeli színektől.

A renderelt oldallal kezdjen, ne a designfájllal

A designfájlok hasznosak, de nem tartalmaznak minden valós változót: CSS felülírásokat, átlátszóságot, hover állapotokat, böngészős betűrenderelést, felhasználói nagyítást, sötét módot, örökölt stílusokat, CMS-tartalmat és marketing beágyazásokat.

Azt az oldalt auditálja, amelyet a felhasználók ténylegesen megkapnak.

Nyissa meg az oldalt egy aktuális asztali böngészőben. A Chrome, Edge, Firefox és Safari mind hasznos vizsgálati eszközöket kínál. A pontos címkék eltérnek, de a munkafolyamat ugyanaz:

1. Kattintson jobb gombbal a szövegre vagy UI-elemre.
2. Válassza az Inspect lehetőséget.
3. Keresse meg a számított color és background-color értékeket.
4. A böngésző színmintájával vagy akadálymentességi paneljével olvassa le a kontrasztarányt.
5. Rögzítse, hogy megfelel, nem felel meg, vagy bizonytalan.

Chromium-alapú böngészőkben a színválasztó gyakran megmutatja a kontrasztarányt és a WCAG szerinti megfelelési/nem megfelelési útmutatást szöveghez. A Firefox DevTools szintén kínál akadálymentességi információkat és színeszközöket. A Safari Web Inspector képes megjeleníteni a számított stílusokat és akadálymentességi információkat, bár a munkafolyamat kissé eltér.

Nem a konkrét böngésző a lényeg. A lényeg a számított eredmény leolvasása, nem az az érték, amelyről valaki azt gondolja, hogy a komponens használja.

Először készítsen egy rövid auditlistát

Ne kezdjen véletlenszerű szövegeket vizsgálni, amíg el nem fárad. Készítsen rövid leltárt a mintákról:

• Törzsszöveg a fő oldalháttéren.
• Visszafogott szöveg, képaláírások, metaadatok és placeholder szövegek.
• Linkek normál, hover, visited és focus állapotban.
• Elsődleges, másodlagos és destruktív gombok.
• Űrlapcímkék, súgószöveg, hibák és sikerüzenetek.
• Navigációs elemek, morzsamenük és fülek.
• Kártyák, jelvények, kapszulák és címkék.
• Jelentést hordozó ikonok.
• Diagramok, térképek, folyamatjelzők és állapotszínek.
• Szöveg képeken, videókon, gradienseken vagy áttetsző fedéseken.

Ez elég ahhoz, hogy egy tipikus webhelyen megtalálja a legtöbb hibát. Az auditot emellett komponensekhez köti, nem egyszeri pixelekhez.

Ha az audit gombokat is tartalmaz, párosítsa a kontrasztellenőrzést az alapokkal az akadálymentes webes gombokról szóló ellenőrzőlistánkban. A gombok kontrasztproblémái gyakran hiányzó fókuszállapotok, nem egyértelmű címkék vagy hibás billentyűzetes működés mellett jelennek meg.

Vizsgálja meg a szövegkontrasztot DevToolsban

Egyszínű háttéren lévő egyszerű szöveg esetén a böngésző általában ki tudja számítani a kontrasztot Ön helyett.

Vizsgálja meg az elemet, és keresse meg a color tulajdonságot. Nyissa meg a színválasztót a színmintából. Ha a böngésző meg tudja határozni a hátteret, megjeleníti a kontrasztarányt. Egyes eszközök a színválasztóban vonalat is rajzolnak, amely megmutatja, hol felelne meg a szín 3:1, 4.5:1 vagy 7:1 aránynak.

Ha a böngésző hibát jelez, higgyen neki, amíg nem tudja bizonyítani az ellenkezőjét. Ha megfelelést jelez, akkor is használjon ítélőképességet. A kicsi, vékony betű, a gyengébb minőségű kijelzők, az erős élsimítás és a mozgalmas hátterek a technikailag megfelelő szöveget is gyengének éreztethetik.

Gyakorlati szabály: ha a törzsszöveg épphogy átmegy 4.55:1 aránnyal, ne ünnepeljen. Adjon neki nagyobb mozgásteret. A kontrasztkövetelmények minimumok, nem ideális célértékek.

A tipográfia is számít. Egy nagyobb, tisztább betűrendszer már azelőtt csökkenti a terhelést, hogy színmódosításokhoz nyúlna. Ha az oldal a megfelelő kontraszt ellenére is nehezen olvashatónak érződik, vizsgálja felül a sorszélességet, a méretet, a betűvastagságot és a térközöket egy tágabb olvashatósági szemlélettel, például ezzel a modern webes olvasható betűkről szóló gyakorlati útmutatóval.

Ellenőrizze a valódi hátteret, beleértve az átlátszóságot is

Sok kontraszthiba azért történik, mert a látható háttér nem azonos a deklarált háttérrel.

Gyakori csapdák:

• Szöveg félig áttetsző kártyában.
• Szöveg olyan szülőelemen, amelyre opacity van alkalmazva.
• rgba() vagy color-mix() használatával készült fedések.
• Gradiensek címsorok mögött.
• Háttérképek, amelyek a szövegterületen belül változnak.
• Témaváltozók, amelyek sötét módban megváltoznak.

Ha a DevTools nem tudja magabiztosan kiszámítani a kontrasztot, azonosítsa kézzel a renderelt előtér- és háttérszíneket. Használja a számított stílusok panelt, ideiglenesen kapcsoljon ki rétegeket, vagy mintavételezze a látható színt a beépített színválasztóval, ha a böngésző támogatja.

Képeken lévő szöveg esetén ne a kép legszebb részéből vegyen mintát. A szöveg mögötti legrosszabb reálisan előforduló területet mintavételezze. Ha a kép CMS-feltöltések, körhinták vagy reszponzív vágások miatt változik, ez nem stabil kontrasztrendszer. Adjon hozzá megbízható fedést, szövegárnyékot, tömör konténert vagy gradiens kezelést, amely a képtől függetlenül védi a szöveget.

Egy jó képfedési rendszer unalmas: ugyanaz a fedéserősség, kiszámítható vágási terület, elegendő kontraszt még világos fotókkal is. Az unalom rendben van. A felhasználók olvasni próbálnak.

Ne feledkezzen meg az állapotokról

A statikus képernyőképek sok kontraszthibát elmulasztanak. Auditálja az interakciós állapotokat közvetlenül a böngészőben.

DevToolsban kényszerítse ki az ilyen pszeudoosztályokat:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

Ezután vizsgálja meg újra a számított színeket.

A fókuszjelzők külön figyelmet érdemelnek. A WCAG 2.2 megerősítette a fókuszmegjelenéssel kapcsolatos elvárásokat, és a halványkék körvonal világosszürke kártyán továbbra is gyakori hiba. A fókuszjelzőnek elegendő kontraszttal kell rendelkeznie a szomszédos színekkel szemben, és elég nagy felületűnek kell lennie ahhoz, hogy észrevehető legyen.

Letiltott vezérlők esetén a WCAG kontrasztszabályai kivételt tesznek az inaktív komponensekkel. Ez nem jelenti azt, hogy a letiltott vezérlőknek alapértelmezés szerint olvashatatlannak kell lenniük. Ha a letiltott állapot hasznos információt hordoz, tegye olvashatóvá. Ha nem, gondolja át, hogy egyáltalán jelen kell-e lennie.

Használja a Lighthouse-t, de ne szervezze ki neki az ítélőképességet

A böngészős auditok, például a Lighthouse, gyorsan elkaphatnak néhány kontraszthibát. Futtassa a beépített auditot, ha a böngésző kínál ilyet, majd kezelje az eredményeket kiindulópontként.

Az automatizált ellenőrzések jól megtalálják azokat a szövegcsomópontokat, amelyeknél nyilvánvaló számított kontraszthiba van. Gyengébbek ezekben:

• Képekbe ágyazott szöveg.
• Canvasban renderelt címkék.
• SVG peremesetek.
• Csak hover állapotban jelentkező hibák.
• A fókuszjelző minősége.
• Diagramok, ahol a színkapcsolatok hordozzák a jelentést.
• Hitelesítés, menük vagy űrlaplépések mögött rejtett komponensek.

Ha egy jelentés zöld, akkor is meg kell vizsgálnia reprezentatív komponenseket. Ha egy jelentés piros, kerülje a pánikot, és sorolja be a hibákat felhasználói hatás szerint. Ugyanez az elv általánosan érvényes a teljesítmény- és akadálymentességi jelentésekre is: az eszköz kimenetét bizonyítékként olvassa, ne ítéletként. Ezt a szemléletet használjuk a Lighthouse-jelentések pánik nélküli értelmezéséről szóló útmutatónkban, és itt is tisztán alkalmazható.

Auditálja a nem szöveges kontrasztot is

A szöveg kapja a legtöbb figyelmet, de a WCAG azokra a nem szöveges tartalmakra is vonatkozik, amelyek az interfész megértéséhez vagy használatához szükségesek.

Legalább ezeket az eseteket ellenőrizze:

• Beviteli mezők keretei az oldal hátteréhez képest.
• Jelölőnégyzetek és rádiógombok körvonalai.
• Kapcsolóállapotok.
• Csak ikonos gombok.
• Hibaikonok és figyelmeztető szimbólumok.
• Diagramvonalak, sávok és címkék.
• Folyamatjelzők.
• Kiválasztott fül vagy aktív navigációs jelző.

A cél általában 3:1 a szomszédos színekkel szemben. Például egy világosszürke beviteli keret fehér háttéren szinte láthatatlan lehet. Egy öt pasztell vonalból álló diagram elegánsnak tűnhet, és mégis használhatatlan lehet.

Diagramoknál a kontraszt önmagában nem elég. Használjon címkéket, mintázatokat, vonalstílusokat, közvetlen annotációt vagy térközöket, hogy az információ ne csak a színtől függjön. Ez segít a színtévesztő felhasználóknak, a gyengénlátó felhasználóknak, azoknak, akik tükröződésben nézik a képernyőt, és bárkinek, aki egy dokumentumban lévő képernyőképet olvas.

Rögzítse a megállapításokat a fejlesztők számára használható formátumban

Egy hasznos kontrasztaudit nem azt mondja, hogy „néhány szürke hibás”. Azonosítja a komponenst, az állapotot, az aktuális értékeket, az elvárt küszöböt és a javasolt javítást.

Egy tömör formátum jól működik:

| Komponens | Állapot | Előtér | Háttér | Arány | Cél | Eredmény | Javasolt javítás | |---|---:|---:|---:|---:|---:|---|---| | Kártya metaadat | Alapértelmezett | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Nem felel meg | Használja ezt: --color-text-muted-strong | | Elsődleges gomb | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Megfelel | Tartsa meg | | Beviteli keret | Alapértelmezett | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Nem felel meg | Sötétítse a keret tokent |

Kösse a javításokat design tokenekhez, ha a webhely használ ilyeneket. Ne javítson húsz egyedi komponenst külön-külön, ha valójában egy gyenge token a probléma.

A javítások legyenek valamivel erősebbek a minimumnál

A kontraszthibákat gyakran könnyű rosszul javítani. A csapatok addig tolnak egy színt, amíg az ellenőrző 4.51:1 értéket nem mutat, majd továbblépnek. Ez nem hagy tartalékot a betűrenderelésre, az átlátszóságra, a böngészők közötti különbségekre, a témázásra, a képek változatosságára vagy a későbbi márkamódosításokra.

Részesítse előnyben a kényelmes célokat:

• Törzsszöveg: amikor praktikus, közelebb a 7:1 arányhoz.
• Visszafogott szöveg: továbbra is 4.5:1 felett, ha valódi tartalom.
• UI-keretek és ikonok: kényelmesen 3:1 felett.
• Szöveg képeken: képenkénti találgatás helyett kontrollált fedést használjon.

A webet olcsó laptopokon, sötét telefonokon, fényes járdákon, színezett monitorokon és öregedő kijelzőkön nézik. A minimális megfelelés nem ugyanaz, mint a kényelmes olvasás.

<!-- tool-cta:start -->

💡 Próbáld ki ezt: Amikor a DevTools-ból kinyert kontrasztpárokat ellenőrzöd, a Color Converter segít a hex, RGB és HSL közötti átváltásban, hogy az értékek illeszkedjenek az auditjegyzeteidhez.

<!-- tool-cta:end -->

Telepítés nélküli kontrasztaudit-ellenőrzőlista

Használja ezt a sorrendet, amikor gyors, de hiteles auditra van szüksége:

1. Nyissa meg az éles oldalt egy modern böngészőben.
2. Sorolja fel a fő szöveg-, UI- és állapotmintákat.
3. Vizsgálja meg a számított előtér- és háttérszíneket DevToolsban.
4. A beépített színválasztóval vagy akadálymentességi panellel olvassa le a kontrasztot.
5. Kényszerítse ki a hover, focus, active, visited és invalid állapotokat.
6. Ellenőrizze a képeken és gradienseken lévő szöveget a legrosszabb reálisan előforduló háttérrel szemben.
7. Ellenőrizze a nem szöveges UI-részeket a 3:1 követelménnyel szemben.
8. Futtasson beépített automatizált auditot biztonsági hálóként, ne a teljes audit helyett.
9. Rögzítse a hibákat komponens és token szerint.
10. Tartalékkal javítson, ne úgy, hogy épphogy átlépi a küszöböt.

Ez elég ahhoz, hogy egy újabb eszköz hozzáadása nélkül elkapja a kontrasztproblémák többségét. A fejlettebb auditoknak továbbra is megvan a helyük, különösen nagy designrendszerek, szabályozott termékek vagy összetett adatvizualizáció esetén. Sok webhely számára azonban a böngésző már megadja a szükséges bizonyítékokat. A nehéz rész az, hogy elég rendszerezett legyen a használatukhoz.