Controllo Contrasto Colore

Come funziona

Seleziona un colore di primo piano e uno di sfondo con i selettori o digita i valori hex direttamente. Lo strumento calcola la luminanza relativa di ogni colore con la formula WCAG 2.1 — una somma pesata dei canali sRGB dopo la decodifica gamma — e divide la luminanza più chiara per la più scura (più 0,05 al numeratore e denominatore per evitare divisione per zero con nero puro). Il rapporto di contrasto risultante va da 1:1 (colori identici) a 21:1 (nero puro su bianco puro). Quattro badge WCAG mostrano pass o fail: AA per testo normale (≥ 4,5:1), AA per testo grande (≥ 3:1), AAA per testo normale (≥ 7:1) e AAA per testo grande (≥ 4,5:1). Un pannello di anteprima mostra frasi di esempio in testo normale e grande per verifica visiva. Il calcolo avviene interamente nel browser senza chiamate al server, e ogni modifica di colore aggiorna il rapporto e l'anteprima istantaneamente.

Casi d'uso

• Controllare una palette di colori aziendali per la conformità all'accessibilità prima del lancio di un redesign
• Scegliere colori di pulsanti e link leggibili su tema chiaro o scuro
• Rispettare i requisiti WCAG 2.1 AA o AAA per conformità Section 508, EN 301 549 o ADA
• Revisionare un mockup inviato da un designer per segnalare testo illeggibile prima dello sviluppo
• Insegnare concetti di accessibilità mostrando come piccole differenze di luminanza causino grandi fallimenti di contrasto