Kontrasti kontrollija – Contrast Checker

See Kontrasti kontrollija auditeerib WCAG ja APCA värvi kontrasti ADA vastavuse jaoks — värvi ligipääsetavuse test igasuguste…

✅ Mida saate sellest kontrasti kontrollijast: - WCAG 2.2 kontrastsuse suhe ja APCA Lc, - probleemsete elementide esiletõstmine lehel, - CSS reeglid, mis genereerisid värvid, jälgitud allika kaartide kaudu (kui saadaval), - sisseehitatud värvivalija tööriist koos kontrasti analüsaatori ja soovitatud alternatiividega, - paranduste reaalajas eelvaade, - paranduste eksport CSS-i (allika asukoha kommentaaridega). 🔍 Ehitatud veebisaidi värvikontrasti kontrollijana, mis käsitleb pseudo-olekuid, shadow DOM-i, sama päritolu iframe'e ja teksti piltide ja gradientide peal — mitte ainult lamedaid taustu. ⚠️ Debuggeri luba on vajalik. Selle kontrasti kontrollija katvus on võimalik ainult Chrome DevTools protokolli kaudu, mis vajab 'debugger' luba. Kui see on ühendatud, näitab Chrome kõigis vahekaartides inforiba ja ei peida seda lahtiühendamisel. ⚡ Kõrge efektiivsusega töövoog: • Vaadake kõiki värvi ligipääsetavuse probleeme esiletõstetuna ühe pilguga. • Eelvaade muudatustele kohe, kontrastsuse suhted ja otsused arvutatakse ümber. • Rakendage kohandatud CSS-i stiililehe vahekaardil; mõjutatud probleemid on loendis märgitud. • Kontrasti käsitsi kontrollimiseks kasutage sisseehitatud värvivalija tööriista: vasakklõps foreground'i seadmiseks, paremklõps tausta jaoks, ja suhe uuendatakse koheselt. • Kasutage välistuste vahekaarti, et peita kõik, välja arvatud elemendid, mida parandate. 📐 Otsuste kriteeriumid. See kontrastsuse suhete kontrollija testib värvi ligipääsetavust WCAG ja APCA nõuete suhtes. APCA Lc hinnatakse Bridge-PCA lävendite järgi, mis on rangemad kui vastavad WCAG suhted — seega tähendab Bridge-PCA läbimine alati WCAG läbimist. 🔬 Mis on APCA? APCA (Ligipääsetav Perceptuaalne Kontrasti Algoritm) on mudel, mis jälgib, kuidas inimesed loevad teksti ekraanil. Kaks värvipaariga, millel on sama WCAG suhe, võivad välja näha märgatavalt erinevad, ja nende APCA Lc (heleduskontrastsus) peegeldab seda: paar võib läbida WCAG, kuid tunduda raske lugeda. See veebisaidi värvi ligipääsetavuse kontrollija arvutab mõlemad numbrid. 🚧 Piirangud: 1. Nagu iga teine veebisaidi ligipääsetavuse kontrollija, annab ka see parima võimaliku hinnangu, mitte vastavuse sertifikaadi. 2. Katvus on ainult tekstipõhine; mitte-tekstiliste elementide kontroll (WCAG 1.4.11) on teel. 3. Rist-päritolu iframe'e ei käsitleta. 4. Kompleksseid taustu ja animatsioone proovib piiratud arvu ruumiliste ja ajaliselt punktide kaudu; halva proovi suhe on teatatud, kuid võib siiski olla optimistlik; proovi võtjate võib petta renderdamise artefaktid. 5. Väga dünaamilised saidid võivad tekitada valeprobleeme. 6. See värvikontrasti kontrollija ei tee automaatselt OCR-i piltide peal; testige pilte, millel on tähenduslik tekst, kaasasoleva värvivalija tööriista kaudu. 🔒 Privaatsus ja load. ▸ Töötab kohapeal; ükski veebilehe andmed ei lahku kunagi teie masinast. ▸ Ainult 'activeTab': analüüsiskript sisestatakse, kui klõpsate tööriistariba ikoonil. ▸ 'debugger' luba on vajalik Shadow DOM-i ja iframe'ide käsitlemiseks, CSS allikate jälgimiseks ja keeruliste taustade proovimiseks. 🧮 Täpsuse üksikasjad. Poolläbipaistvat teksti ja eelkäija opakust käsitletakse õigesti: esiplaan on komposiitne oma tegeliku tausta kohal enne heleduse mõõtmist, nii et teatatud suhe vastab sellele, mida kasutajad tegelikult näevad. Lai-gamut värvifunktsioonid — oklch, lab, lch, color(display-p3) — on samuti toetatud, klambrid sRGB-le, kui need on väljaspool gamut. 🎨 Tekst piltide ja gradientide peal. Erinevalt enamikest sarnastest tööriistadest ei loobu see mitte-lamedatest taustadest ega usalda, mida 'getComputedStyle' / 'CSS.getBackgroundColors' teatavad. See jälgib brauseri värvimise järjekorda, et komposiitne tegelik taust — opakust, segamisrežiimid, lineaarsed gradientid, taustafiltrid — ja kui see ei ole piisav, proovib see värvikontrasti tööriist renderdatud pikslite asukohta teksti kohal. ❓ KKK 📌 Miks saavad samad värvipaarid mõnikord WCAG ja APCA all erinevaid otsuseid? ↳ WCAG mõõdab heledust; APCA mõõdab perceptuaalset kontrasti. Paar, mis saavutab 4.5:1, võib siiski jääda alla Bridge-PCA Lc läve — rangem mudel. 📌 Kas APCA asendab WCAG? ↳ Ei — APCA ei asenda, vaid on kasulik teine arvamus. See kontrasti kontrollija teatab mõlemast. 📌 Kas ma saan skaneerida kohalikku faili või oma arendusserverit selle ligipääsetavuse kontrollijaga? ↳ Jah. Lubage "Luba juurdepääs faili URL-idele" laienduse seadetes. Avage file:// või localhost URL ja klõpsake tööriistariba ikoonil. Ainult chrome://, Chrome'i veebipood ja muud piiratud skeemid jäetakse vahele. 📌 Kas see tööriist sertifitseerib ADA vastavust? ↳ Ei. See kontrollib ainult värvikontrasti — ligipääsetavuse üks aspekt. ADA vastavus on õiguslik määratlemine, mis katab palju standardeid ja kriteeriume (semantika, klaviatuuri juurdepääs, alternatiivne tekst, subtiitrid ja palju muud) ning peaks olema hinnatud kvalifitseeritud spetsialisti poolt.