Színkontraszt: így mérje meg és javítsa a weboldalán

Röviden

• A WCAG 1.4.3-as feltétele (AA szint) szerint a szöveg és a háttér kontrasztaránya legalább 4,5:1, nagy szövegnél legalább 3:1.
• A gomboknál, a mezők kereténél, az ikonoknál és a fókuszjelzésnél legalább 3:1 kell a szomszédos színhez (WCAG 1.4.11).
• Ez a leggyakoribb hiba a weben: a WebAIM 2026-os felmérése szerint az egymillió vizsgált főoldal 83,9%-án volt gyenge kontrasztú szöveg, oldalanként átlagosan 34 helyen.
• A magyar webshopok sem kivételek: saját 2026-os felmérésünk szerint a vizsgált 116 bolt 83%-ának főoldalán volt gyenge kontrasztú szöveg. Ez volt a leggyakoribb hiba.
• A javítás többnyire egy sötétebb árnyalat a szövegnek, nem új arculat.

Kinek számít

Gyengénlátóknak, színtévesztőknek, idősebb vásárlóknak, és mindenkinek, aki telefonon, napfényben vagy alacsony fényerővel nézi az oldalt. A korral romló látás és a szürkehályog csökkenti a kontrasztérzékenységet, ezért a halványszürke szöveg sokaknak egyszerűen olvashatatlan.

Mit jelent a 4,5:1

A kontrasztarány azt méri, mennyire különbözik a két szín világossága: 1:1, ha a kettő ugyanaz, és 21:1 a fekete szöveg fehér háttéren. Számolni nem kell, az alábbi eszközök kiírják. Néhány példa:

• Fekete szöveg fehér háttéren: 21:1. Megfelel.
• #767676 szürke szöveg fehér háttéren: 4,54:1. Ez a legvilágosabb szürke, amely fehéren még megfelel.
• #999999 szürke szöveg fehér háttéren: 2,85:1. Nem felel meg.
• Fehér felirat #FF6600 narancs gombon: 2,94:1. Nem felel meg, nagy szövegként sem.
• Fekete felirat ugyanezen a narancson: 7,15:1. Megfelel.

Nagy szöveg a legalább 18 pontos (kb. 24 pixeles), illetve a legalább 14 pontos (kb. 18,7 pixeles) félkövér szöveg. A szokásos 14–16 pixeles törzsszövegre és a legtöbb gombfeliratra tehát a 4,5:1 vonatkozik.

Kivételek: a logó és a márkanév, a letiltott (inaktív) gombok és mezők, a tisztán díszítő szöveg, és a fényképen véletlenül látszó felirat.

Hol a leggyakoribb a gyenge kontraszt egy webshopban

• Világosszürke másodlagos szöveg: nettó ár, cikkszám, szállítási idő, „Nincs készleten”, a lábléc linkjei.
• Helykitöltő szöveg a keresőben és az űrlapmezőkben, ha csak az írja le a formátumot.
• Fehér felirat világos márkaszínű gombon: narancson, sárgán, világoszöldön. Fehér szöveg #FFC107 sárgán: 1,63:1.
• Szöveg fotón vagy sliderben: a kép egyik részén olvasható, a másikon nem.
• Piros akciós ár halvány alapon: a #E30613 piros fehéren 4,88:1, de halvány rózsaszín (#FFE5E5) címkén már csak 4,09:1.
• Szövegközi linkek, amelyeket csak a színük különböztet meg. Ilyenkor a link és a körülötte lévő szöveg között is legalább 3:1 kell, de egyszerűbb, ha a link alá van húzva (WCAG 1.4.1).
• Halvány mezőkeretek: a #DDDDDD keret fehér alapon 1,36:1, a mező szinte láthatatlan.
• Gyenge fókuszjelzés, például halványkék keret világos háttéren.
• Sötét mód: ha a webhely sötét témát is kínál, azt külön is mérje meg.

Hogyan mérje meg

• Chrome vagy Edge fejlesztői eszközök: kattintson jobb gombbal a szövegre, válassza a „Vizsgálat” menüpontot, majd a Stílusok panelen kattintson a szín melletti kis négyzetre. A színválasztó kiírja a kontrasztarányt, és jelzi, hogy megfelel-e az AA szintnek.
• WebAIM Contrast Checker: két színkódot beírva kiszámolja az arányt: webaim.org/resources/contrastchecker.
• Colour Contrast Analyser (TPGi): ingyenes asztali program pipettával, képen lévő szöveghez is jó.
• Automatikus vizsgálat: az egész webhelyen megkeresi a gyenge kontrasztú szövegeket. Az EqualVia a színátmeneten és a háttérképen lévő szöveget is megméri: képernyőképen nézi meg, mi van ténylegesen a szöveg mögött. Sok automatikus eszköz ezeket nem dönti el, csak felülvizsgálandónak jelöli.

A gombok, a mezőkeretek és az ikonok kontrasztját (1.4.11) az automatikus eszközök általában nem mérik, ezeket nézze meg kézzel.

Hogyan javítsa arculatváltás nélkül

• Sötétebb árnyalat szöveghez. A márkaszín maradhat a nagy felületeken és a díszítő elemeken; szöveghez és kis elemekhez használjon belőle sötétebb árnyalatot. Fehér felirat a #FF6600 narancson 2,94:1, a sötétebb #C2410C narancson 5,18:1.
• Világos márkaszínen sötét szöveg. Sárga vagy narancs gombon általában a sötét felirat a jobb választás: a #222222 a #FFC107 sárgán 9,76:1.
• A háttér is számít. A #767676 szürke fehéren megfelel (4,54:1), de a webshopokban gyakori #F5F5F5 világosszürke háttéren már nem (4,17:1). Ott legalább #707070 kell.
• Szöveg képen: tegyen a szöveg mögé egyszínű vagy áttetsző sötét sávot, vagy helyezze a szöveget a kép mellé. A szöveg legyen valódi szöveg, ne a kép része.
• Egy helyen javítsa: a színeket a sablon vagy a téma beállításaiban (Shoprenter, UNAS, WooCommerce-téma) érdemes átírni, így minden oldalon egyszerre javul.
• Ne csak színnel jelezzen: a hibás mező, a készlet vagy az akció mellett legyen szöveg vagy ikon is.

Jogszabály és szabvány

A 2022. évi XVII. törvény hatálya alá tartozó szolgáltatásoknál a gyakorlati mérce a WCAG 2.1 AA szint, az EN 301 549 szabványon keresztül. Mindkét kontrasztfeltétel (1.4.3 és 1.4.11) ennek része. Részletek: WCAG 2.1 AA és EN 301 549, az akadálymentességi törvény összefoglalója.

További lépések: akadálymentes webshop ellenőrzőlista, akadálymentes űrlapok.

Ez az útmutató technikai segítség, nem jogi tanácsadás.