Kontraszt

A halvány szürke szöveg fehér alapon szép lehet, de sokan nem tudják elolvasni: gyengénlátók, idősebbek, és mindenki, aki erős napfényben vagy rossz kijelzőn nézi az oldalt. A WCAG 2.2 1.4.3-as sikerességi feltétele (Contrast (Minimum), AA szint) ezért legalább 4,5 : 1 kontrasztarányt kér a szövegtől és a háttértől.

Hogyan mérjük

A riport egy valódi böngészőben (mobilra emulálva) betölti az oldalt, és lefuttatja a Lighthouse color-contrast auditját (az axe-core szabálya; a riport Lighthouse 13.6 és axe-core 4.14 változattal dolgozik).

A küszöbök megegyeznek a WCAG-éval:

• Normál szöveg: legalább 4,5 : 1.
• Nagy szöveg: legalább 3 : 1. Nagynak a legalább 18 pontos (kb. 24 képpontos), vagy a legalább 14 pontos félkövér (kb. 18,66 képpontos) szöveg számít.

Az eredmény:

• Megfelelő: az audit egyetlen szövegnél sem talál elégtelen kontrasztot.
• Hiba: legalább egy szövegnél a kontrasztarány a küszöb alatt van. A teszt nem számolja, hány ilyen van, egy is elég.
• Nem értékelhető: az audit nem tudott dönteni, vagy nem volt vizsgálható szöveg.

Figyelmeztető szint nincs. A WCAG szerint az arányt nem szabad kerekíteni: a 4,499 : 1 nem felel meg a 4,5 : 1 küszöbnek.

Amit a mérés nem tesz: nem ellenőrzi a kezelőelemek és az ikonok színkontrasztját (ezt a WCAG 1.4.11 Non-text Contrast kéri), és az oldal betöltött állapotát nézi, így az egérrel fölé mutatáskor vagy fókuszkor megjelenő színeket nem. Ahol a szöveg mögött kép vagy színátmenet van, a háttérszín nem számolható ki egyértelműen, ezért ezeknél a szabály gyakran nem tud dönteni; ellenőrizd ezeket kézzel is. A WCAG kivételt tesz a letiltott kezelőelemek feliratára, a tisztán díszítő szövegre és a logókra.

Hogyan javítsd

Nincs általános kód: a javítás az oldal színeitől függ. A teendő:

1. Nézd meg, melyik szövegnél van a baj. A Chrome fejlesztői eszközeiben (F12) az elem stílusai között kattints a szövegszín melletti színmintára, és nyisd le a „Contrast ratio” részt: a színválasztó megmutatja az arányt, és hogy eléri-e az AA vagy az AAA szintet.
2. Sötétítsd a szöveg színét vagy világosítsd a hátteret, amíg a normál szöveg eléri a 4,5 : 1 arányt (a nagy szöveg a 3 : 1-et).

Néhány példa fehér (#ffffff) háttéren, kiszámolt arányokkal:

Szövegszín	Kontrasztarány	Normál szövegnél
#999999	2,85 : 1	nem felel meg
#777777	4,48 : 1	nem felel meg (a küszöb alatt)
#767676	4,54 : 1	megfelel
#595959	7,0 : 1	megfelel

CSS

/* előtte: halvány szürke, 2,85 : 1 */
.meta { color: #999999; }

/* utána: 4,54 : 1 */
.meta { color: #767676; }

WordPress

A színeket a téma testreszabójában (Megjelenés > Testreszabás) vagy a webhelyszerkesztőben (Stílusok > Színek) állítsd. Ha a téma saját CSS-t használ, a kiegészítő CSS mezőben vagy a gyermektéma stíluslapján írd felül a halvány színeket. A szövegek mögötti képek és színátmenetek felett a szöveg színe legyen elég sötét (vagy világos) a legkedvezőtlenebb képrészleten is.

Hogyan ellenőrizd

1. A riportban futtasd újra a mérést.
2. Chrome-ban az F12 > Lighthouse panelen válaszd az Accessibility kategóriát: a „Background and foreground colors do not have a sufficient contrast ratio” audit felsorolja az érintett elemeket.