Szövegszín ellenőrzésekor a tényleges előtér–háttér párból indulj ki, majd a szöveg méretéhez tartozó küszöbhöz hasonlítsd a kontrasztarányt. A hasonló színkódok között is lehet olyan különbség, amely megváltoztatja az eredményt. A küszöbvizsgálatot a kerekítés előtt végezd el.
A WCAG küszöbértéke
A WCAG 2.2 szövegre vonatkozó AA kontrasztkövetelménye általában legalább 4,5:1. Nagyméretű szövegnél a küszöb 3:1; a vonatkozó meghatározás legalább 18 pontos, illetve félkövér esetben legalább 14 pontos betűméretet használ. Kivételek is vannak, ezért egy teljes akadálymentességi értékelés több a kontrasztmérésnél.
A képlet (L_világos + 0,05)/(L_sötét + 0,05). A relatív fénysűrűséget az sRGB-csatornák megfelelő linearizálása után számoljuk: L = 0,2126R + 0,7152G + 0,0722B, ahol R, G és B már a linearizált csatornaértékek. A csatornák egyszerű számtani átlaga nem helyettesíti ezt az eljárást.
Két szürke példa fehér háttéren
A #767676 szürke fehér háttéren körülbelül 4,54:1 kontrasztot ad. A hozzá nagyon közeli #777777 már körülbelül 4,48:1 értékű. Az utóbbi a 4,5:1-es küszöböt nem éri el. Az értéket ezért nem szabad felfelé kerekítve megfelelőnek minősíteni.
Fekete és fehér között 21:1 az arány. Ettől még a betűméret, betűvastagság, sortávolság és megjelenítési helyzet befolyásolja a használhatóságot. Egy jó számérték egyetlen ellenőrzési szempont.
Átlátszó vagy változó háttér
Félig áttetsző szövegnél a ténylegesen összeálló színt kell vizsgálni. Fotóra helyezett feliratnál a háttér a betűk alatt változhat, így egyetlen kiválasztott képpont nem írja le az egész szöveget. A DG színeszközzel a színkódokat rendezheted; a kontrasztot a fenti módszerrel vagy erre szolgáló ellenőrzővel számold. A hover, fókusz és hibajelzési állapot színpárját külön is nézd meg.
Egy használható színmódosítás ellenőrzése
Fehér, #FFFFFF háttéren a #808080 szürke kontrasztja körülbelül 3,95:1. Ez egy normál vastagságú, 16 CSS-pixeles szöveg 4,5:1 követelményét nem teljesíti. Ugyanilyen háttéren a sötétebb #666666 körülbelül 5,74:1, ezért ennél a szövegnél eléri a küszöböt. A világosabb #999999 csak körülbelül 2,85:1-et adna.
A normál vastagságú 24 CSS-pixeles szöveg a 18 pontos mérethatárnak felel meg, így rá a nagyméretű szöveg 3:1 küszöbe alkalmazható. A 16 pixeles szöveg puszta félkövérre állítása viszont még nem éri el a 14 pontos, körülbelül 18,67 CSS-pixeles félkövér mérethatárt. Előbb rögzítsd a tényleges betűméretet és vastagságot, majd ellenőrizd az alap-, hover- és fókuszállapot színpárját. A példák teljesen fedő sRGB-színekkel számolnak; áttetszőség vagy változó háttér esetén a ténylegesen összeálló színt kell vizsgálnod.
Kapcsolódó DG Kalkulátor megnyitása
Forrás és módszertani háttér
A számpéldák saját szemléltető számítások.
Háromkérdéses tudáspróba
Válassz kérdésenként egy választ, és jegyezd fel az A, B vagy C betűt. Előbb oldd meg mindhárom feladatot, utána nézd meg a megoldásokat.
1. Általános szövegnél mi a leírt AA küszöb?
- A) 4,5:1
- B) 2:1
- C) 3:1
2. 4,48:1 megfelel a 4,5:1 küszöbnek felfelé kerekítve?
- A) Csak szürke színnél
- B) Nem
- C) Igen
3. Fehér háttéren egy 16 CSS-pixeles, normál vastagságú #808080 szöveg kontrasztja 3,95:1. Melyik változtatás éri el a 4,5:1 követelményt a megadott adatokból?
- A) A szöveg #666666 színre váltása, amely 5,74:1-et ad
- B) A szöveg #999999 színre váltása, amely 2,85:1-et ad
- C) A 3,95:1 érték felfelé kerekítése
Megoldások és önálló pontozás
Minden helyes válasz 1 pont; a hibás vagy kihagyott válasz 0 pont. Legfeljebb 3 pont szerezhető. 3 pont: A szövegmérethez tartozó követelményt a tényleges kontrasztaránnyal hasonlítottad össze, és megfelelő színmódosítást választottál. 2 pont: nézd át az eltévesztett kérdésnél megnevezett részt, és számold újra annak példáját. 0–1 pont: haladj végig a három megoldáson, majd oldd meg újra a kérdéseket. Ez a rövid próba a cikk összefüggéseinek megértését ellenőrzi.
1. megoldás
A) 4,5:1 – A nagyméretű szöveghez tartozik az alacsonyabb 3:1 küszöb. Ha más választ adtál vagy kihagytad, ezt a részt ismételd át: A WCAG küszöbértéke.
2. megoldás
B) Nem – A tényleges arányt kell a küszöbhöz hasonlítani. Ha más választ adtál vagy kihagytad, ezt a részt ismételd át: Két szürke példa fehér háttéren.
3. megoldás
A) A szöveg #666666 színre váltása, amely 5,74:1-et ad – Az 5,74:1 nagyobb a szükséges 4,5:1-nél. A világosabb szín kisebb arányt ad, a kerekítés pedig nem változtatja meg a tényleges kontrasztot. Ha más választ adtál vagy kihagytad, ezt a részt ismételd át: Egy használható színmódosítás ellenőrzése.