Verificator de contrast – Contrast Checker

Acest Verificator de contrast evaluează contrastul de culoare WCAG și APCA pentru conformitatea cu ADA — un test de accesibilitate…

✅ Ce vei obține de la acest verificator de contrast: - raportul de contrast WCAG 2.2 și APCA Lc, - elemente cu probleme evidențiate pe pagină, - reguli CSS care au produs culorile, urmărite prin hărți sursă (dacă sunt disponibile), - instrument de selecție a culorilor integrat cu un analist de contrast și alternative sugerate, - previzualizare în timp real a corecțiilor, - exportul corecțiilor în CSS (cu comentarii de localizare a sursei). 🔍 Creat ca un verificator de contrast al culorilor pentru site-uri web care parcurge stările pseudo, shadow DOM, iframe-uri de aceeași origine și text peste imagini și degradeuri — nu doar fundaluri plate. ⚠️ Permisiunea de debugger este necesară. Acoperirea acestui verificator de contrast este posibilă doar prin Protocolul Chrome DevTools, care necesită permisiunea 'debugger'. Odată atașat, Chrome arată o bară de informații pe toate tab-urile și nu o ascunde la detașare. ⚡ Flux de lucru foarte optimizat: • Vezi toate elementele cu probleme de accesibilitate a culorilor evidențiate dintr-o privire. • Previziune imediată a modificărilor, cu raporturi de contrast și verdicturi recalibrate. • Aplică CSS personalizat pe tab-ul Stylesheet; problemele afectate sunt marcate în listă. • Pentru a verifica manual contrastul culorilor, folosește instrumentul de selecție a culorilor integrat: click stânga pentru a seta primul plan, click dreapta pentru fundal, iar raportul se actualizează instantaneu. • Folosește tab-ul Exclusions pentru a ascunde totul, cu excepția elementelor pe care le corectezi. 📐 Criterii în spatele verdicturilor. Acest verificator de raporturi de contrast testează accesibilitatea culorilor în raport cu cerințele WCAG și APCA. APCA Lc este evaluat în raport cu pragurile Bridge-PCA, care sunt mai stricte decât raporturile WCAG corespunzătoare — astfel, un rezultat pozitiv la Bridge-PCA implică întotdeauna un rezultat pozitiv la WCAG. 🔬 Ce este APCA? APCA (Algoritmul de Contrast Perceptual Accesibil) este un model care urmărește cum citesc oamenii textul pe un ecran. Două perechi de culori cu același raport wcag pot arăta diferit, iar apca Lc (contrastul de luminanță) reflectă acest lucru: o pereche poate trece de WCAG, dar să fie greu de citit. Acest verificator de accesibilitate a culorilor pentru site-uri calculează ambele valori. 🚧 Limitări: 1. Ca orice alt verificator de accesibilitate a site-urilor, acesta oferă estimări de bună credință, nu un certificat de conformitate. 2. Acoperirea este doar pentru text; verificarea elementelor non-textuale (wcag 1.4.11) este pe agenda de lucru. 3. iframe-urile de origine diferită nu sunt analizate. 4. Fundalurile complexe și animațiile sunt eșantionate la un număr finit de puncte spațiale și temporale; raportul celui mai prost eșantion este raportat, dar poate fi optimist; eșantionerul poate fi, de asemenea, indus în eroare de artefactele de redare. 5. Site-urile foarte dinamice pot produce probleme false. 6. Acest verificator de contrast al culorilor nu rulează OCR pe imagini automat; testează imaginile cu text semnificativ prin intermediul instrumentului de selecție a culorilor inclus. 🔒 Confidențialitate și permisiuni. ▸ Rulează local; niciun date de pe pagină nu părăsește vreodată mașina ta. ▸ 'activeTab' doar: scriptul de analiză este injectat când faci clic pe pictograma din bara de instrumente. ▸ Permisiunea 'debugger' este necesară pentru a pătrunde în Shadow DOM și iframe-uri, a urmări sursele CSS și a eșantiona fundaluri complexe. 🧮 Detalii de acuratețe. Textul semi-transparent și opacitatea strămoșilor sunt gestionate corect: primul plan este compus peste fundalul său real înainte ca luminanța să fie măsurată, astfel încât raportul raportat se potrivește cu ceea ce văd efectiv utilizatorii. Funcțiile de culoare cu gamă largă — oklch, lab, lch, color(display-p3) — sunt, de asemenea, acceptate, limitate la sRGB atunci când sunt în afara gamei. 🎨 Text peste imagini și degradeuri. Spre deosebire de cele mai multe instrumente similare, acesta nu renunță la fundalurile non-plate sau nu se bazează pe ceea ce raportează 'getComputedStyle' / 'CSS.getBackgroundColors'. Parcurge ordinea de redare a browserului pentru a compune fundalul real — opacitate, moduri de amestecare, degradeuri liniare, filtru de fundal — și când aceasta nu este suficient, acest instrument de contrast al culorilor eșantionează pixelii redați la locația textului. ❓ Întrebări și răspunsuri 📌 De ce aceeași pereche de culori primește uneori verdicturi diferite sub WCAG și APCA? ↳ WCAG măsoară luminanța; APCA măsoară contrastul perceptual. O pereche care trece de 4.5:1 poate să nu atingă pragul Lc Bridge-PCA — un model mai strict. 📌 APCA înlocuiește WCAG? ↳ Nu — APCA nu este o înlocuire, ci o a doua opinie utilă. Acest verificator de contrast raportează ambele. 📌 Pot scana un fișier local sau serverul meu de dezvoltare cu acest verificator de accesibilitate? ↳ Da. Activează "Permite accesul la URL-urile fișierelor" în setările extensiei. Deschide URL-ul file:// sau localhost și fă clic pe pictograma din bara de instrumente. Numai chrome://, Chrome Web Store și alte scheme restricționate sunt omise. 📌 Acest instrument certifică conformitatea ADA? ↳ Nu. Verifică doar contrastul culorilor — o fațetă a accesibilității. Conformitatea ADA este o determinare legală care acoperă multe standarde și criterii (semantica, accesul prin tastatură, text alternativ, subtitrări și altele) și ar trebui evaluată de un profesionist calificat.