1. Adja meg a szövegszínt
Írjon be egy színkódot (pl. #333333) HEX, RGB vagy HSL formátumban – vagy válasszon a színválasztóból.
Ellenőrizze a színkontrasztot és az olvashatóságot a WCAG szerint
Adjon meg egy szöveg- és háttérszínt, és az eszköz megmutatja, hogy a kontraszt megfelelő-e. A számítások a WCAG 2.1 nemzetközi akadálymentességi szabványon alapulnak, amely minimális kontrasztrtékeket határoz meg különböző tartalomtipusokhoz.
Loading tool editor...
Miért fontos a színek olvashatósága?
Az olvashatóság a szövegszín és a háttérszín közötti fényerősség-különbség. Minél nagyobb a különbség, annál könnyebb a szöveget olvasni. A túl alacsony kontraszt megnehezíti a tartalom olvasását – különösen a látássérültek, idősek vagy nehéz fényviszonyok között (pl. telefonon közvetlen napfényben).
Az Egészségügyi Világszervezet (WHO) szerint világszerte mintegy 2,2 milliárd embernek van valamilyen látási problémája. Emellett milliók színtévesztők (a férfiak mintegy 8%-a és a nők 0,5%-a), és sokan tapasztalnak életkorral összefüggő látásromlást.
Az eszköz a WCAG 2.1 (Webtartalom Akadálymentességi Irányelvek) – a nemzetközi digitális akadálymentességi irányelvek – által meghatározott képlettel számítja ki a kontrasztarányt. Az eredmény objektiív értékelést tesz lehetővé arról, hogy a színek elég olvashatóak-e, függetlenül a monitor beállításaitól vagy az egyéni színérzékeléstől.
Hogyan használja a színkontraszt ellenőrzőt
Az olvashatóság ellenőrzése mindössze néhány másodpercet vesz igénybe:
2. Adja meg a háttérszínt
Adja meg a háttérszínt, amelyen a szöveg megjelenik – ez lehet egy szekció, blokk vagy az egész oldal háttere.3. Olvassa le az eredményt
Az eszköz kiszámítja a kontrasztarányt és megmutatja, hogy a színek megfelelnek-e a WCAG követelményeknek normál szöveg, nagy szöveg és ikonok esetén.4. Állítsa be a színeket
Ha a kontraszt túl alacsony, az Illesztés funkció automatikusan javasol egy színváltozatot, amely megfelel a kiválasztott küszöbnek.
Milyen színformátumok támogatottak?
HEX
Hexadecimális formátum – a legelterjedtebb a webdesignban. # jellel kezdődik és 3 vagy 6 karaktert tartalmaz (0-9 számjegyek és A-F betűk).
#fff– fehér (rövidített forma)#ffffff– fehér (teljes forma)#1a73e8– kék
Kontrasztarány
8.59:1
Normál szöveg
AA (min. 4.5:1)AAA (min. 7:1)
Példa normál szöveg
Nagy szöveg
AA (min. 3:1)AAA (min. 4.5:1)
Hogyan értelmezze az olvashatósági teszt eredményeit
A színek bevitele után az eszköz három szekciban jeleníti meg az eredményeket:
- Normál szöveg – 4,5:1 kontraszt szükséges (AA) vagy 7:1 (AAA). 18pt (24px) alatti vagy 14pt bold alatti szövegre vonatkozik.
- Nagy / félkövér szöveg – 3:1 kontraszt szükséges (AA) vagy 4,5:1 (AAA). Címsorokra, gombokra és kiemelésekre vonatkozik.
- Ikonok – 3:1 kontraszt szükséges (AA). Ikonokra és grafikus UI-elemekre vonatkozik, amelyek információt közvetítenek.
Zöld jelző azt jelenti, hogy a követelmény teljesül. Piros jelző azt jelenti, hogy a kontraszt túl alacsony és javításra szorul.
Mit jelentenek az olvashatósági teszt eredményei?
Az eszköz a kontrasztarányt 1:1 (nincs kontraszt) és 21:1 (maximális kontraszt – fekete fehéren) közötti skálán mutatja. Az eredményt a WCAG szabványban meghatározott küszöbértékekkel vetik össze:
- Normál szöveg – legalább 4,5:1 szükséges az AA szinthez (minimális szabvány) vagy 7:1 az AAA szinthez (emelt szabvány). 18pt (24px) alatti vagy 14pt (18,5px) bold alatti szövegre vonatkozik.
- Nagy / félkövér szöveg – legalább 3:1 szükséges az AA szinthez vagy 4,5:1 az AAA szinthez. 18pt (24px)-tól vagy 14pt (18,5px) bold-tól szövegre vonatkozik – címsorok, gombok, kiemelések.
- Ikonok és UI-elemek – legalább 3:1 szükséges az AA szinthez. Ikonokra, gombokra, űrlapmezőkre és más, információt közvetítő felületi elemekre vonatkozik.
Az AA szint a minimális követelmény a digitális akadálymentességi szabályozásban sok országban, beleértve az EU webes akadálymentességi irányelvet. Az AAA szint jobb olvashatóságot biztosít, de nem mindig praktikus elérni minden elemnél.
Automatikus színillesztés a WCAG követelményekhez
Ha a kontraszt túl alacsony, nem kell próbálgatással keresnie a megfelelő színt. Az Illesztés funkció automatikusan megtalál egy szövegszín-változatot, amely megfelel a kiválasztott kontraszt-küszöbnek.
Hogyan működik az illesztés:
- Válassza ki az illesztési célt a listából – pl. AA normál szöveghez vagy AAA nagy szöveghez.
- Kattintson az Illesztés gombra.
- Az eszköz átkeresi a szövegszín világossági változatait, és a legközelebbit javasolja, amely megfelel a követelményeknek.
- A javasolt színt a vágólapra másolhatja, vagy azonnal beállíthatja új szövegszínként.
Az algoritmus megőrzi az eredeti szín színezetét és telítettségét, csak a világosságot változtatja meg. A javasolt szín összhangban marad a vizuális identitással, miközben megfelel az akadálymentességi szabványnak.
Mit jelentenek az AA és AAA szintek a WCAG szabványban?
| Feature | AA szint (minimum) | AAA szint (emelt) |
|---|---|---|
| Normál szöveg – min. 4,5:1 | ||
| Normál szöveg – min. 7:1 | ||
| Nagy / félkövér szöveg – min. 3:1 | ||
| Nagy / félkövér szöveg – min. 4,5:1 | ||
| Ikonok és UI-elemek – min. 3:1 | ||
| Jogilag kötelező (EU irányelv) | ||
| Szükséges az US ADA / Section 508 szerint | ||
| Szükséges az UK Equality Act 2010 szerint | ||
| Ajánlott kulcsfontosságú tartalomhoz |
AA szint (minimum)
- Normál szöveg – min. 4,5:1
- Normál szöveg – min. 7:1
- Nagy / félkövér szöveg – min. 3:1
- Nagy / félkövér szöveg – min. 4,5:1
- Ikonok és UI-elemek – min. 3:1
- Jogilag kötelező (EU irányelv)
- Szükséges az US ADA / Section 508 szerint
- Szükséges az UK Equality Act 2010 szerint
- Ajánlott kulcsfontosságú tartalomhoz
AAA szint (emelt)
- Normál szöveg – min. 4,5:1
- Normál szöveg – min. 7:1
- Nagy / félkövér szöveg – min. 3:1
- Nagy / félkövér szöveg – min. 4,5:1
- Ikonok és UI-elemek – min. 3:1
- Jogilag kötelező (EU irányelv)
- Szükséges az US ADA / Section 508 szerint
- Szükséges az UK Equality Act 2010 szerint
- Ajánlott kulcsfontosságú tartalomhoz
Hibáelhárítás a kontraszt-ellenőrzővel
Hibaüzenet jelenik meg a színformátumról
Ellenőrizze a színformátumot. A HEX kódnak # jellel kell kezdődnie, és 3 vagy 6 karaktert kell tartalmaznia (pl. #fff vagy #ffffff). RGB formátum esetén ellenőrizze, hogy az értékek vesszőkkel vannak-e elválasztva, és a 0-255 tartományba esnek-e.
Az Illesztés funkció nem talál megfelelő színt
Ha a háttér és a szöveg hasonló fényerősségű ugyanabban az árnyalatban, az algoritmus nem talál olyan variánst, amely az árnyalat megváltoztatása nélkül megfelel a követelményeknek. Ebben az esetben fontolja meg a háttérszín megváltoztatását vagy egy teljesen más szövegszín választását.
A színválasztóban látható szín nem felel meg a beírt kódnak
A böngésző színválasztója csak a HEX formátumot támogatja átlátszóság nélkül. Ha RGBA vagy HSLA formátumban ad meg színt átlátszósággal, a színválasztó csak a színkomponenst jeleníti meg (alpha nélkül). A kontrasztszámítások továbbra is figyelembe veszik az átlátszóságot.
Hol kell ellenőrizni a színek olvashatóságát?
Az olvashatóság mindenhol fontos, ahol valakinek szöveget kell olvasnia vagy UI-elemet kell felismernie:
Weboldalak
Szöveg az oldalakon, gombok, linkek, űrlapok. Különösen fontos üzleti webhelyeknél, ahol a látogatók különböző életkorú és látásképességűek.Webshopok
Árak, Vásárlás gombok, termékinformációk. A gyenge olvashatóság elveszett rendeléseket jelenthet.Prezentációk
A projektoron vetített diák gyakran gyengébb kontrasztot mutatnak, mint a monitoron. Ellenőrizze a színeket a bemutató előtt.Plakátok és szórólapok
A változó fényviszonyok között nézett nyomtatott anyagok magas kontrasztot igényelnek.Mobil alkalmazások
A telefonokat erős napfényben, éjszaka és minden korú ember használja.Éttermi menük
Gyakran színes papírra nyomtatva vagy díszes betűtípusokkal – könnyen túl alacsony kontrasztot eredményezhet.
Színek olvashatósága színtévesztő felhasználók számára
A színtévesztés a férfiak mintegy 8%-át és a nők 0,5%-át érinti. A színtévesztők nehézségekkel küzdhetnek bizonyos színpárok megkülönböztetésében, még akkor is, ha a fényerősség-kontraszt megfelelő.
A színtévesztés leggyakoribb típusai:
- Deuteranópia – nehézség a zöld és piros megkülönböztetésében (leggyakoribb forma)
- Protanópia – nehézség a piros észlelésében
- Tritanópia – nehézség a kék és sárga észlelésében (ritka)
Ez az eszköz a fényerősség-kontrasztot ellenőrzi, ami minden felhasználó számára fontos. A tervezés során azonban érdemes elkerülni a problémás színkombinációkat (pl. piros szöveg zöld háttéren), és ne támaszkodjon kizárólag a színre az információközvetítésben – használjon formákat, ikonokat és szöveget is.
Akadálymentesítési követelmények Magyarországon
Magyarország az EU webes akadálymentesítési irányelvét az 1998. évi XXVI. törvény (Akadálymentesítési törvény) módosításával ültette át. A digitális akadálymentesítés szabályozása azonban korlátozott a fizikai akadálymentesítéshez képest.
- Közszféra - a 2018/1784. Korm. rendelet előírja az EN 301 549 szabvány teljesítését, amely a WCAG 2.1 AA szintre hivatkozik. Az állami, önkormányzati és közintézményi weboldalakra vonatkozik.
- Európai Akadálymentesítési Irányelv (EAA) - 2025 júniusától a követelmények kiterjednek a magánszektorra: webáruházak, banki szolgáltatások, közlekedés és médiaplatformok.
- Magyar sajátosság - a digitális akadálymentesítés felügyelete egyelőre kevésbé kidolgozott, mint Nyugat-Európában, de az EAA hatálybalépése várhatóan felgyorsítja a fejlődést.
A kontraszt arány 4,5:1 a normál szöveghez és 3:1 a nagy szöveghez az összes fenti előírás által megkövetelt érték.
Mi teszi különlegessé ezt a kontraszt ellenőrzőt?
Objektiív értékelés matematikai képlet alapján
A kontrasztarányt a WCAG képletével számítják ki – az eredmény nem függ a monitor beállításaitól vagy az egyéni színérzékeléstől.Megfelelés a nemzetközi WCAG szabványnak
Az eredmények megfelelnek a WCAG 2.1 követelményeinek, amelyek az EU és sok más ország digitális akadálymentességi szabályozásának alapját képezik.Automatikus színillesztés a küszöbhöz
Az Illesztés funkció megtalál egy szövegszín-változatot, amely megfelel a kiválasztott kontraszt-küszöbnek – megőrzi a színezetet, csak a világosságot változtatja.Öt színformátum
Támogatott formátumok: HEX, RGB, RGBA, HSL és HSLA. A színkód közvetlenül beilleszthető Figmából, Photoshopból vagy CSS stíluslapból.Három tartalomtipus egy tesztben
Egyetlen ellenőrzés megmutatja az eredményt normál szövegre, nagy szövegre (címsorok, gombok) és ikonokra – nem kell külön-külön tesztelni.
Gyakran ismételt kérdések a színkontraszt ellenőrzőről
Mi az a színkontraszt-arány?
A kontrasztarány két szín közötti fényerősség-különbség mérőszáma. A skála 1:1-től (nincs különbség – pl. fehér szöveg fehér háttéren) 21:1-ig (maximális különbség – fekete szöveg fehér háttéren) terjed. Minél magasabb az arány, annál könnyebb a szöveget megkülönböztetni a háttértől.
Mekkora kontraszt elegendő a WCAG szerint?
Normál szöveghez a minimum 4,5:1 (AA szint). Nagy szöveghez – 18pt-tól vagy 14pt bold-tól – 3:1 elegendő. Ikonokhoz és UI-komponensekhez szintén 3:1 szükséges. Ezek a küszöbértékek a legtöbb felhasználó számára biztosítják az olvashatóságot, beleértve a látássérülteket.
Fontos-e a színkontraszt a színtévesztő felhasználók számára?
Az ellenőrző a fényerősség-kontrasztot teszteli, ami minden felhasználó számára fontos, beleértve a színtévesztőket. A színtévesztés azonban színérzékelési probléma, nem fényerősségi – így a kontraszt mellett kerülje a problémás színpárokat (pl. piros szöveg zöld háttéren), és ne támaszkodjon kizárólag a színre az információközvetítésben.
Miért nem felel meg a színem a követelményeknek, ha jól látom?
A személyes színérzékelés a monitor beállításaitól, a szobai megvilágítástól és az egyéni látásképességektől függ. A WCAG objektiív matematikai képleten alapul, amely figyelembe veszi a különböző látási problémákat. Egy szín, amely az egyik képernyőn olvasható, másikon vagy más személynek olvashatatlan lehet.
Meg kell felelnem az AAA kontraszt szintnek?
Nem mindig. Az AA szint (4,5:1 normál szöveghez) az Európai Unióban az akadálymentességi szabályozás által megkövetelt minimum. Az AAA szint (7:1) jobb olvashatóságot biztosít, de nehezebb elérni. Kritikus tartalmaknál – figyelmeztetések, biztonsági utasítások – fontolja meg az AAA célzását.
Mi a WCAG szabvány?
A WCAG (Web Content Accessibility Guidelines) a W3C szervezet által fejlesztett nemzetközi webes akadálymentességi irányelvek. Többek között minimális színkontraszt-értékeket, címsorstruktúrát, billentyűzet-támogatást és más követelményeket határoz meg, amelyek a weboldalakat hozzáférhetővé teszik különböző fogyatékosságokkal élő emberek számára.
Hol találom a weboldalam színkódjait?
Böngészőben (Chrome, Firefox, Edge) megnyithatja a fejlesztői eszközöket (jobb kattintás > Vizsgálat). A Stílusok fülön láthatja az oldalon használt színeket. Alternatívaként böngésző-bővítmények, mint a ColorZilla, lehetővé teszik bármely elem színének kiválasztását a kód nélkül.
Melyik színpárokat ellenőrizzem először a weboldalamon?
A legfontosabbak: szöveg a fő háttéren, szöveg bannereken és színes szekciókon, gombok (szövegszín és gombháttér az oldal hátteréhez képest), linkek és ikonok. Különös figyelmet fordítson azokra az elemekre, amelyek különböző háttereken jelennek meg a szekciótól függően.
A magyar jog megköveteli a színkontrasztot a weboldalakon?
Igen. A 2018/1784. Korm. rendelet előírja az EN 301 549 szabvány teljesítését a közszféra weboldalai számára, amely a WCAG 2.1 AA szintre hivatkozik. Ez magában foglalja a 4,5:1 kontrasztarányt normál szöveghez és 3:1-et nagy szöveghez. Az Európai Akadálymentesítési Irányelv (EAA) 2025 júniusától a magánszektorra is kiterjeszti a kötelezettséget.
Hogyan találom meg a weboldalam színkódjait?
A böngészőben (Chrome, Firefox, Edge) nyissa meg a fejlesztői eszközöket (jobb klikk > Vizsgálat). A Stílusok fülön láthatja az oldalon használt színeket. Alternatívaként a ColorZilla bővítmény lehetővé teszi bármely elem színének kiválasztását.
Működik ez az eszköz sötét módú tervezéshez?
Igen. Az eszköz bármely két szín kontrasztarányát ellenőrzi, függetlenül attól, melyik a világosabb. Sötét módhoz adjon meg világos szövegszínt és sötét háttérszínt. Ugyanazok a WCAG küszöbértékek érvényesek.
Segítsen nekünk fejleszteni eszközeinket
Van ötlete egy új funkcióhoz, hibát talált, vagy szeretne javasolni egy másik eszközt, amely megkönnyítené a munkáját? Írjon nekünk – 24 órán belül válaszolunk.