Kontrasztellenőrző – Contrast Checker

Ez a Kontrasztellenőrző a WCAG és APCA színkontrasztot ellenőrzi az ADA megfelelőség érdekében — egy színhozzáférhetőségi teszt…

✅ Mit kapsz a Kontrasztellenőrzőtől: - WCAG 2.2 kontrasztarány és APCA Lc, - a problémás elemek kiemelve az oldalon, - a színeket előállító CSS szabályok, forrás térképeken keresztül nyomozva (ha elérhető), - beépített színválasztó eszköz kontraszt-elemzővel és javasolt alternatívákkal, - élő előnézet a javításokról, - a javítások exportálása CSS-be (forrásmegjelölő megjegyzésekkel). 🔍 Weboldal színkontraszt-ellenőrzőként készült, amely kezeli a pszeudo-állapotokat, árnyék DOM-ot, azonos eredetű iframe-eket, valamint a szöveget képek és gradiensek felett — nem csak lapos háttérrel. ⚠️ Hibakereső engedély szükséges. A Kontrasztellenőrző lefedettsége csak a Chrome DevTools protokollon keresztül lehetséges, amely a 'debugger' engedélyt igényli. Miután csatlakozott, a Chrome egy információs sávot mutat az összes lapon, és nem rejti el a leválasztáskor. ⚡ Magasan optimalizált munkafolyamat: • Az összes színhozzáférhetőségi problémával rendelkező elemet egy pillantással kiemelve láthatod. • Azonnal előnézheted a változásokat, a kontrasztarányokat és az ítéleteket újraszámolják. • Alkalmazz egyedi CSS-t a Stíluslap fülön; az érintett problémák a listában meg vannak jelölve. • A színkontraszt manuális ellenőrzéséhez használd a beépített színválasztó eszközt: bal kattintással állítsd be a foreground-ot, jobb kattintással a háttér színt, és az arány azonnal frissül. • Használj kizárási fület, hogy mindent elrejts, kivéve azokat az elemeket, amelyeket javítasz. 📐 Az ítéletek mögötti kritériumok. Ez a kontrasztarány-ellenőrző a színhozzáférhetőséget teszteli a WCAG és APCA követelményeinek megfelelően. Az APCA Lc a Bridge-PCA küszöbértékekhez van viszonyítva, amelyek szigorúbbak, mint a megfelelő WCAG arányok — így egy Bridge-PCA átmenet mindig WCAG átmenetet is jelent. 🔬 Mi az APCA? Az APCA (Accessible Perceptual Contrast Algorithm) egy modell, amely nyomon követi, hogyan olvassák az emberek a szöveget a képernyőn. Két színpár, amelynek ugyanaz a WCAG aránya, észlelhetően eltérően nézhet ki, és az APCA Lc (fényerő kontraszt) ezt tükrözi: egy pár átmehet a WCAG-n, mégis nehezen olvashatónak tűnhet. Ez a weboldal színhozzáférhetőségi ellenőrző mindkét számot kiszámítja. 🚧 Korlátozások: 1. Mint minden más weboldal hozzáférhetőségi ellenőrző, ez is legjobb erőfeszítéseket tesz, nem pedig megfelelőségi tanúsítványt ad. 2. A lefedettség csak szövegre vonatkozik; a nem szöveges elemek ellenőrzése (WCAG 1.4.11) a jövőbeni terveink között szerepel. 3. Az eltérő eredetű iframe-ekbe nem lépünk be. 4. A komplex háttér és animációk véges számú térbeli és időbeli ponton kerülnek mintavételezésre; a legrosszabb minta arányát jelentjük, de ez még mindig optimista lehet; a mintavételezőt a renderelési artefaktumok is félrevezethetik. 5. Nagyon dinamikus oldalak hamis problémákat okozhatnak. 6. Ez a színkontraszt-ellenőrző nem futtat automatikusan OCR-t a képeken; teszteld a jelentős szöveget tartalmazó képeket a mellékelt színválasztó eszközzel. 🔒 Adatvédelem és engedélyek. ▸ Helyben fut; egyetlen weboldal adat sem hagyja el a gépedet. ▸ Csak 'activeTab': az elemző szkript akkor kerül beillesztésre, amikor rákattintasz az eszköztár ikonra. ▸ 'debugger' engedély szükséges a Shadow DOM és iframe-ek kezeléséhez, a CSS források nyomozásához és a komplex háttér mintavételezéséhez. 🧮 Pontossági részletek. A félig átlátszó szöveget és az ősök átlátszóságát helyesen kezeljük: a foreground a valódi háttér előtt van összetevőve, mielőtt a fényerőt mérjük, így a jelentett arány megfelel annak, amit a felhasználók valójában látnak. A széles színskálájú színfunkciók — oklch, lab, lch, color(display-p3) — szintén támogatottak, és ha a skálán kívül esnek, sRGB-re korlátozódnak. 🎨 Szöveg képek és gradiensek felett. A legtöbb hasonló eszközhöz képest ez nem adja fel a nem lapos háttérrel, és nem bízik abban, amit a 'getComputedStyle' / 'CSS.getBackgroundColors' jelent. Nyomon követi a böngésző festési sorrendjét, hogy összetevőzze a valódi hátteret — átlátszóság, keverési módok, lineáris gradiensek, háttérszűrő — és amikor ez nem elegendő, ez a színkontraszt eszköz a szöveg helyén mintavételezi a renderelt pixeleket. ❓ Kérdések és válaszok 📌 Miért kap néha ugyanaz a színpár eltérő ítéleteket a WCAG és APCA alatt? ↳ A WCAG a fényerőt méri; az APCA a perceptuális kontrasztot. Egy pár, amely 4.5:1 arányt teljesít, még mindig nem éri el a Bridge-PCA Lc küszöböt — egy szigorúbb modellt. 📌 Az APCA helyettesíti a WCAG-ot? ↳ Nem — az APCA nem helyettesít, hanem hasznos másodvélemény. Ez a kontrasztellenőrző mindkettőt jelent. 📌 Ellenőrizhetek egy helyi fájlt vagy a fejlesztői szerveremet ezzel a hozzáférhetőségi ellenőrzővel? ↳ Igen. Engedélyezd a "Hozzáférés a fájl URL-ekhez" opciót a bővítmény beállításaiban. Nyisd meg a file:// vagy localhost URL-t, és kattints az eszköztár ikonra. Csak a chrome://, a Chrome Web Store és más korlátozott sémák kerülnek kihagyásra. 📌 Tanúsítja ez az eszköz az ADA megfelelőséget? ↳ Nem. Csak a színkontrasztot ellenőrzi — a hozzáférhetőség egy aspektusát. Az ADA megfelelőség jogi meghatározás, amely számos szabványt és kritériumot (szemantika, billentyűzet-hozzáférés, alternatív szöveg, feliratok és még sok más) magában foglal, és azt egy képzett szakembernek kell értékelnie.