Színkontraszt szövegekhez, gombokhoz és ikonokhoz

Miért számít a kontraszt

A sápadt szöveg olvasókba kerül. A gyengénlátóknak, az idősebb olvasóknak és mindenkinek, aki erős fényben néz a telefonjára, világos különbségre van szüksége a szöveg és a háttér között. A W3C Web Content Accessibility Guidelines (WCAG) irányelvei ezért minimumértékeket határoznak meg a szövegre, a vezérlőkre, például gombokra és beviteli mezőkre, valamint az ikonokra és grafikákra. Ezek mérhetők, és indulás előtt ellenőrizhetők.

Hogyan működik a kontrasztarány

A kontrasztarány azt hasonlítja össze, mennyire világos két szín. A WCAG nem a színárnyalatot nézi, hanem a relatív fénysűrűséget: egy 0 (a legsötétebb fekete) és 1 (a legvilágosabb fehér) közötti értéket. A vörös, zöld és kék csatornát átszámítják és súlyozzák: a zöld számít a legtöbbet, a vörös kevesebbet, a kék a legkevesebbet. Az arány (L1 + 0,05) / (L2 + 0,05), ahol L1 a világosabb szín fénysűrűsége. Az eredmény 1:1 (két azonos szín) és 21:1 (fekete a fehéren) között van.

A gyakorlatban a W3C két szabálya számít. Először: az értékeket nem kerekítik, egy 4,499:1-es arány nem éri el a 4,5:1-es határt. Másodszor: a kontrasztot a szövegnek beállított háttérhez mérik. Ha egy oldal csak szövegszínt állít be, háttérszínt nem, a W3C ezt hibának tekinti, mert a látogató alapértelmezett háttere ismeretlen. Mindig mindkét színt együtt állítsd be.

A három sikerkritérium

• 1.4.3 Kontraszt (minimum), AA szint: a szövegnek és a szövegképeknek legalább 4,5:1 kell, a nagy szövegnek legalább 3:1.
• 1.4.6 Kontraszt (fokozott), AAA szint: a szövegnek legalább 7:1 kell, a nagy szövegnek legalább 4,5:1. Ez a szigorúbb szint, és hosszú szövegeknél segít a legtöbbet.
• 1.4.11 Nem szöveges tartalom kontrasztja, AA szint: legalább 3:1 a szomszédos színekhez képest mindarra, amit látnod kell egy vezérlő és állapota felismeréséhez (például egy beviteli mező kerete vagy egy fókuszjelző), valamint a grafikák azon részeire, amelyek a tartalom megértéséhez kellenek, például ikonokra vagy egy diagram vonalaira.

Mi számít nagy szövegnek

Nagy szöveg a legalább 18 pontos, vagy félkövéren legalább 14 pontos szöveg. A W3C ezt nagyjából 24 pixelre, félkövéren nagyjából 18,5 pixelre számítja át. A nagy szövegnek kisebb kontraszt is elég, mert a betűk nagyobbak, és a vonásaik szélesebbek. Vékony betűtípusoknál légy óvatos: a W3C szerint az élsimítás miatt a vékony vagy szokatlan betűtípusok halványabbnak tűnhetnek a megadott színüknél. Vastagabb betűtípusokat vagy a minimumnál jóval nagyobb kontrasztú színpárt javasol.

Minek nem kell megfelelnie

• Inaktív komponensek, például egy letiltott gomb.
• Tiszta díszítés és olyan szöveg, amelyet senki sem lát.
• Logó vagy márkanév részét képező szöveg.
• Véletlenszerű szöveg egy jelentős egyéb tartalmat hordozó képen, például egy utcatábla egy fotón.

Gyakori hibák

• Világosszürke a fehéren. A dátumokhoz, képaláírásokhoz vagy másodlagos szöveghez használt szürke gyakran túl halvány: a #999999 a fehéren csak 2,84:1-et ér el. A legvilágosabb tiszta szürke, amely fehéren normál szövegnél megfelel az AA-nak, a #767676, 4,54:1-gyel.
• Szöveg képeken. A kontraszt a fotó minden részén más. A W3C a kellő kontraszt nélküli háttérképeket hibaként sorolja fel (F83). Tedd a szöveget egyszínű felületre, sötétítsd el mögötte a képet, vagy helyezd a szöveget a kép mellé. A szöveg mögötti legvilágosabb pontot ellenőrizd.
• Helyőrző szöveg. Az üres beviteli mezőben lévő szürke tipp szöveg, és vonatkozik rá az 1.4.3. Egy világosszürke, például a #9ca3af a fehéren csak 2,53:1-et ér el. A helyőrző ráadásul nem helyettesíti a látható címkét.
• Hover- és fókuszállapotok. Az egér rámutatásakor vagy billentyűzetfókusznál megjelenő vagy megváltozó szövegnek ugyanazokat az értékeket kell teljesítenie. Egy hover-effektus nem csökkentheti egy vezérlő kontrasztját, és nem gyengítheti a fókuszjelzőt. Egy saját tervezésű fókuszjelzőnek 3:1 kell a mellette lévő háttérhez képest.
• Fehér szöveg élénk márkaszíneken. A fehér szövegű narancs, sárga, világoszöld vagy türkiz gombok gyakran elbuknak: a fehér a #ff6600-on 2,93:1-et ér el.
• Halvány keretek és ikonok. Ha csak a keret mutatja, hol van egy beviteli mező, annak 3:1 kell: a #cccccc a fehéren 1,60:1. A szöveg nélkül jelentést hordozó ikonoknak, például egy legördülő nyílnak vagy egy bezárás ikonnak, szintén 3:1 kell.
• Csak egy téma ellenőrzése. Ha az oldaladnak van sötét módja, annak színpárjait külön ellenőrizd. Egy fehéren működő szín sötét háttéren elbukhat.

Javítsd a márkapalettát a márka elvesztése nélkül

1. 1Írd fel az összes színt a szerepével együtt: szöveg, háttér, kiemelés vagy gomb, keret. Sok probléma ott kezdődik, ahol egy szín minden feladatot ellát.
2. 2A márkaszínt ott tartsd meg, ahol a szabályok könnyebben teljesíthetők, vagy nem érvényesek: a logóban, nagy felületeken, díszítésre és nagy címsorokhoz.
3. 3Szövegekhez és kis elemekhez ugyanannak az árnyalatnak egy sötétebb vagy világosabb változatát használd. Ha csak a világosság változik, a szín felismerhető marad: a fehér szöveg a #c74f00-n, egy sötétebb narancson, 4,61:1-et ér el.
4. 4Vagy inkább a szöveg színét változtasd meg. A sötét szöveg egy élénk márkaszínen gyakran jobban működik, mint a fehér: a #1a1a1a a #ff6600-on 5,92:1-et ér el.
5. 5Határozz meg egy megfelelő szürkét a másodlagos szöveghez, például #767676 a fehéren, és mindenhol azt használd több halvány szürke helyett.
6. 6Ellenőrizz minden állapotot: normál, hover, fókusz, hiba és sötét mód. A végleges színeket mentsd változóként a stíluslapodba, hogy senki ne válasszon újra kézzel halvány színt.

Ellenőrizd a színeidet a Do4U-val

A Színkontraszt-ellenőrzés ezeket az értékeket számítja ki a saját színeidre. Megadod a színeidet, soronként egyet, és mindegyikhez szerepet rendelsz: szöveg, háttér, kiemelés (például egy gomb) vagy keret. A kód minden értelmes párt ellenőriz az AA és az AAA ellen normál és nagy szövegnél, valamint a 3:1 ellen kereteknél, ikonoknál és gombfelületeknél, felfelé kerekítés nélkül. Minden elbukó párhoz megkapod a legközelebbi megfelelő színt, egyszer sötétebben, egyszer világosabban, ugyanabban az árnyalatban. A Do4U egy igazított palettát is készít, egészként újra ellenőrzi, és exportálja CSS custom propertyként, SCSS-ként vagy JSON-ként. Minden kódban fut, AI nélkül, és az ellenőrzés ingyenes.

Az ellenőrzés csak a megadott színpárokat ismeri. Nem látja a betűméreteket, a szöveg mögötti képeket, az átlátszóságot vagy a hover- és fókuszállapotokat, ezért a kész oldalakat is teszteld. A Do4U elkészíti a tervezetet, te ellenőrzöl és döntesz.