Controllo del Contrasto – Contrast Checker

Questo Controllo del Contrasto verifica il contrasto dei colori WCAG e APCA per la conformità ADA — un test di accessibilità dei…

✅ Cosa otterrai da questo Controllo del Contrasto: - rapporto di contrasto WCAG 2.2 e APCA Lc, - elementi con problemi evidenziati sulla pagina, - regole CSS che hanno prodotto i colori, tracciate attraverso le mappe sorgente (se disponibili), - strumento di selezione colore integrato con un analizzatore di contrasto e alternative suggerite, - anteprima dal vivo delle correzioni, - esportazione delle correzioni in CSS (con commenti per la localizzazione della sorgente). 🔍 Costruito come un controllore di contrasto dei colori del sito web che gestisce stati pseudo, shadow DOM, iframe con stessa origine e testo su immagini e gradienti — non solo sfondi piatti. ⚠️ Permesso di debugger richiesto. La copertura di questo controllore di contrasto è possibile solo attraverso il Chrome DevTools Protocol, che richiede il permesso 'debugger'. Una volta collegato, Chrome mostra una barra informativa su tutte le schede e non la nasconde alla disconnessione. ⚡ Flusso di lavoro altamente ottimizzato: • Vedi tutti gli elementi con problemi di accessibilità del colore evidenziati a colpo d'occhio. • Anteprima immediata delle modifiche, con rapporti di contrasto e verdetti ricalcolati. • Applica CSS personalizzato nella scheda Stile; i problemi interessati sono contrassegnati nell'elenco. • Per controllare manualmente il contrasto dei colori, utilizza lo strumento di selezione colore integrato: clicca a sinistra per impostare il primo piano, clicca a destra per lo sfondo, e il rapporto si aggiorna istantaneamente. • Usa la scheda Esclusioni per nascondere tutto tranne gli elementi che stai correggendo. 📐 Criteri dietro i verdetti. Questo controllore di rapporto di contrasto testa l'accessibilità del colore rispetto ai requisiti WCAG e APCA. L'APCA Lc è valutato rispetto alle soglie Bridge-PCA, che sono più severe rispetto ai rapporti WCAG corrispondenti — quindi un passaggio Bridge-PCA implica sempre un passaggio WCAG. 🔬 Cos'è l'APCA? L'APCA (Accessible Perceptual Contrast Algorithm) è un modello che traccia come le persone leggono il testo su uno schermo. Due coppie di colori con lo stesso rapporto WCAG possono apparire notevolmente diverse, e il loro APCA Lc (contrasto di luminanza) lo riflette: una coppia può superare il WCAG ma risultare difficile da leggere. Questo controllore di accessibilità del colore del sito calcola entrambi i numeri. 🚧 Limitazioni: 1. Come ogni altro controllore di accessibilità del sito web, questo fornisce stime di massimo sforzo, non un certificato di conformità. 2. La copertura è solo testuale; il controllo degli elementi non testuali (WCAG 1.4.11) è in programma. 3. Gli iframe cross-origin non vengono analizzati. 4. Sfondi complessi e animazioni sono campionati a un numero finito di punti spaziali e temporali; il rapporto del campione peggiore è riportato ma potrebbe essere ancora ottimistico; il campionatore può anche essere fuorviato da artefatti di rendering. 5. Siti altamente dinamici possono produrre problemi spurii. 6. Questo controllore di contrasto dei colori non esegue OCR sulle immagini automaticamente; testa le immagini con testo significativo tramite lo strumento di selezione colore incluso. 🔒 Privacy e permessi. ▸ Esegue localmente; nessun dato della pagina web lascia mai la tua macchina. ▸ Solo 'activeTab': lo script di analisi viene iniettato quando clicchi sull'icona della barra degli strumenti. ▸ È richiesto il permesso 'debugger' per accedere a Shadow DOM e iframe, tracciare le sorgenti CSS e campionare sfondi complessi. 🧮 Dettagli di accuratezza. Il testo semi-trasparente e l'opacità degli antenati sono gestiti correttamente: il primo piano è composto sopra il suo vero sfondo prima che venga misurata la luminanza, quindi il rapporto riportato corrisponde a ciò che gli utenti vedono effettivamente. Le funzioni di colore a gamma ampia — oklch, lab, lch, color(display-p3) — sono anch'esse supportate, limitate a sRGB quando fuori gamma. 🎨 Testo su immagini e gradienti. A differenza della maggior parte degli strumenti simili, questo non rinuncia a sfondi non piatti né si fida di ciò che riporta 'getComputedStyle' / 'CSS.getBackgroundColors'. Segue l'ordine di pittura del browser per comporre il vero sfondo — opacità, modalità di fusione, gradienti lineari, filtro di sfondo — e quando ciò non è sufficiente, questo strumento di contrasto dei colori campiona i pixel renderizzati nella posizione del testo. ❓ Domande e Risposte 📌 Perché la stessa coppia di colori a volte riceve verdetti diversi sotto WCAG e APCA? ↳ WCAG misura la luminanza; APCA misura il contrasto percettivo. Una coppia che supera 4.5:1 può comunque non raggiungere la soglia APCA Lc di Bridge-PCA — un modello più severo. 📌 L'APCA sostituisce il WCAG? ↳ No — l'APCA non è una sostituzione, ma un utile secondo parere. Questo controllore di contrasto riporta entrambi. 📌 Posso scansionare un file locale o il mio server di sviluppo con questo controllore di accessibilità? ↳ Sì. Abilita "Consenti accesso agli URL dei file" nelle impostazioni dell'estensione. Apri l'URL file:// o localhost e clicca sull'icona della barra degli strumenti. Solo chrome://, il Chrome Web Store e altri schemi riservati vengono saltati. 📌 Questo strumento certifica la conformità ADA? ↳ No. Controlla solo il contrasto dei colori — un aspetto dell'accessibilità. La conformità ADA è una determinazione legale che copre molti standard e criteri (semantica, accesso da tastiera, testo alternativo, didascalie e altro) e dovrebbe essere valutata da un professionista qualificato.