A Kontrasztellenőrző kiszámítja két szín WCAG 2.1 kontrasztarányát, és minősíti azokat az AA/AAA küszöbértékek szerint, normál és nagy szöveghez egyaránt. Az élő előnézet a kiválasztott színekkel megjelenített szöveget mutatja, az „oldal háttérszínének kiválasztása” gomb pedig mintát vesz az aktuális oldalról.
Az akadálymentesség egyre inkább elvárás — a WCAG-megfelelés sok joghatóságban jogi követelmény, és ahol nem is az, a gyenge kontraszt elriasztja a felhasználókat. A Kontrasztellenőrző azonnal megmutatja, hogy bármely két szín megfelel-e a WCAG szabványoknak. Válasszon előtér- és háttérszínt színválasztóval vagy hex érték beillesztésével; az eszköz a hivatalos WCAG luminancia-képlet alapján számítja ki a kontrasztarányt, és négy küszöbérték szerint minősíti: AA normál (≥4,5:1), AA nagy (≥3:1), AAA normál (≥7:1) és AAA nagy (≥4,5:1). Minden küszöbértékhez egyértelmű Megfelel/Nem felel meg jelölés tartozik. Az élő előnézet nagy és normál méretű szöveget jelenít meg a kiválasztott színekkel, így látja a tényleges vizuális hatást. Egy kényelmi gomb mintát vesz az aktuális oldal body háttérszínéből — hasznos, ha egy valódi weboldalon szeretné ellenőrizni, hogy egy színkombináció megfelel-e. Minden a böngészőben, helyben fut, semmi nem kerül feltöltésre.
A hivatalos WCAG luminancia-képletet használja a kontrasztarány kiszámításához. Az eredmény pontos, és megegyezik minden szabványos akadálymentességi ellenőrzőével.
Megfelel/nem felel meg jelölés AA normál (≥4,5:1), AA nagy (≥3:1), AAA normál (≥7:1) és AAA nagy (≥4,5:1) esetén — mind rácsos elrendezésben.
Valódi nagy és normál méretű szöveget jelenít meg a választott színekkel, így a számszerű arány mellett a vizuális hatást is látja.
Egy kattintással mintát vesz az aktuális oldal kiszámított body háttérszínéből — hasznos valós kombinációk teszteléséhez.
Írjon be egy hex értéket, vagy használja a natív színválasztót. Az értékek kétirányúan szinkronizálódnak, bármelyiket is szerkeszti.
Egy kattintással felcserélheti az előtér- és a háttérszínt — hasznos invertált témák vagy hover állapotok ellenőrzésekor.
Egy színpaletta véglegesítése előtt ellenőrizze minden szövegszínt a háttere alapján, hogy biztosítsa a WCAG AA megfelelést — elkerülhető így a későbbi átdolgozás.
Használja az „oldal háttérszínének kiválasztása” funkciót egy élő oldalon, majd illessze be a tényleges szövegszínt — perceken belül megtalálja az akadálymentességi hibákat a Lighthouse megnyitása nélkül.
Ha egy márka olyan színt választ, amely elbukhatja az akadálymentességi ellenőrzést, használja az ellenőrzőt a legközelebbi megfelelő változat (sötétebb/világosabb árnyalat) megtalálásához.
Ellenőrizze, hogy a hover/aktív/letiltott állapotok színei is megfelelnek-e a kontrasztkövetelményeknek, nem csak az alapértelmezett állapot.
A sötét témák gyakran nem felelnek meg a szürke-szürkén szövegnél. Ellenőrizze a legsötétebb szürkéit a legsötétebb hátterei alapján, hogy ezeket elkapja.
Kattintson a Kontraszt ikonra a DevSuite Pro dokkban. Megnyílik egy panel előtér- és háttérszín mezőkkel.
Használja a színválasztót, vagy illesszen be hex értéket mindkettőhöz. Az élő előnézet a színek módosításakor azonnal frissül.
A nagy szám (pl. 4,8:1) a kontrasztarány. Minél nagyobb, annál jobb. A 3 az abszolút minimum; normál szöveghez a 4,5 a cél.
Az AA és AAA, normál és nagy szövegméret Megfelel/Nem felel meg jelölései egy pillantásra megmutatják, mire alkalmas a kombinációja.
Ha nem felel meg, módosítsa a színeket. Sötétítse az előteret vagy világosítsa a hátteret (vagy fordítva), amíg a célszint Megfelel jelölést nem mutat.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
