Ugrás a tartalomra

Technológia és facility management — egy megbízható partnertől.

Egy partner. Minden szolgáltatás.
Szoftverfejlesztéstől a Loxone okosotthonon át a teljeskörű üzemeltetésig — mindent egy kézből.

3525 Miskolc, Bodótetői út 1. 3. em. 9.

2021 Lorz Kft.

Kapcsolatfelvétel
Ingyenes eszköz · 1 perc

WCAG-kontrasztellenőrző

Add meg a szöveg és a háttér színét: megmutatjuk a kontrasztarányt, az AA és AAA szintű megfelelést, és ha kell, egy javasolt, megfelelő szövegszínt.

Kontrasztarány5,04:1

Nagy szöveg mintája

Normál szöveg: így olvasná a látogató a termékleírást vagy az űrlap feliratát.

Kosárba
  • Normál szöveg, AA (legalább 4,5:1, WCAG 1.4.3)Megfelel
  • Nagy szöveg, AA (legalább 3:1, WCAG 1.4.3)Megfelel
  • Ikon, mezőkeret, gomb széle, AA (legalább 3:1, WCAG 1.4.11)Megfelel
  • Normál szöveg, AAA (legalább 7:1, WCAG 1.4.6)Nem felel meg
  • Nagy szöveg, AAA (legalább 4,5:1, WCAG 1.4.6)Megfelel

Javasolt, megfelelő szövegszín

AAA szinthez (7:1): #0B635F

Az eszköz két színt hasonlít össze. Egy teljes oldal megfeleléséhez ennél több kell: így ellenőrizzük és javítjuk a weboldalakat.

Miért számít a kontraszt?

A gyenge kontrasztú szöveget a gyengénlátó, az idősebb látogató és a napfényben telefonozó vásárló is nehezen olvassa. A WCAG ezért számszerű határt ad: a kontrasztarány 1:1-től (azonos színek) 21:1-ig (fekete a fehéren) terjed, és a szövegméret meg a megfelelési szint szabja meg, mi az elvárt minimum.

A kontraszt az egyik leggyakoribb és legkönnyebben javítható akadálymentességi hiba, de csak egy elem a sok közül. A teljes képhez a billentyűzetes kezelést, az űrlapokat és a képernyőolvasós működést is meg kell nézni. A követelményeket a WCAG magyarul cikkünk foglalja össze, azt pedig, hogy kire kötelező, az akadálymentesítési ellenőrzőnkkel nézheted meg.

Hogyan számol az eszköz?

A WCAG 2.2 képletét használja: mindkét szín relatív fénysűrűségét kiszámolja, majd a világosabb és a sötétebb értéket hasonlítja össze. Átlátszó színt, képre vagy színátmenetre írt szöveget nem kezel: ott a legrosszabb helyen mért háttérszínt érdemes megadni.

Miben tudunk segíteni?

Ha a teljes weboldalt vagy webshopot szeretnéd átnézetni és javíttatni, akadálymentesítési szolgáltatásunkban gépi és kézi teszttel mérjük fel, majd a kódban és a sablonokban is kijavítjuk a hibákat.

Gyakori kérdések

Mi a jó kontrasztarány egy weboldalon?
A WCAG AA szintjén a normál szövegnél legalább 4,5:1, a nagy szövegnél és a felhasználói felület elemeinél, például ikonoknál és mezőkereteknél legalább 3:1. A szigorúbb AAA szinten a normál szöveg 7:1, a nagy szöveg 4,5:1.
Mi számít nagy szövegnek?
A WCAG szerint a legalább 18 pontos, illetve a legalább 14 pontos félkövér szöveg. Weben ez nagyjából 24, illetve 18,66 CSS-képpontnak felel meg, normál böngészőbeállítással.
Mire nem vonatkozik a kontrasztkövetelmény?
A logókra és a márkanév részét képező szövegre, a tisztán díszítő vagy nem látható elemekre, valamint az inaktív, nem használható vezérlőkre. Az aktív gomb, a link és a hibaüzenet viszont beletartozik.
Mi a teendő, ha a márkaszín nem éri el az arányt?
Nem kell lecserélni a teljes arculatot. Gyakori megoldás, hogy a márkaszín megmarad nagy felületekre, a kis szöveghez pedig a szín sötétebb vagy világosabb változata kerül. Az eszköz ehhez javasol egy hasonló, megfelelő színt.
Miért nem kerekít az eszköz?
A W3C szerint a 4,5:1 és a 3:1 határérték, ezért a számított értéket kerekítés nélkül kell vizsgálni. A 4,499:1 nem felel meg, még akkor sem, ha kerekítve 4,5-nek látszana. Ezért a kijelzett arányt lefelé kerekítjük.
Elküldik valahova a beírt színeket?
Nem. A számítás a böngésződben történik, a színeket nem mentjük és nem továbbítjuk. Legfeljebb annyit látunk névtelen statisztikában, hogy használták az eszközt.

Források

Beszéljük meg a projektedet!

Mondd el, mire van szükséged — egy munkanapon belül válaszolunk.

Kapcsolatfelvétel