Il Controllo contrasto calcola il rapporto di contrasto WCAG 2.1 tra due colori e li valuta rispetto alle soglie AA/AAA sia per il testo normale che per quello grande. L'anteprima dal vivo mostra il testo renderizzato nei colori scelti e un pulsante 'Preleva sfondo pagina' campiona lo sfondo della pagina corrente.
L'accessibilità è sempre più richiesta: la conformità alle WCAG è un requisito legale in molte giurisdizioni e, anche dove non lo è, un contrasto scarso allontana gli utenti. Il Controllo contrasto ti dice istantaneamente se due colori soddisfano gli standard WCAG. Scegli un colore di primo piano e uno di sfondo tramite il selettore di colori o incollia i valori esadecimali; lo strumento calcola il rapporto di contrasto utilizzando la formula ufficiale della luminanza WCAG e lo valuta rispetto a quattro soglie: AA normale (≥4.5:1), AA grande (≥3:1), AAA normale (≥7:1) e AAA grande (≥4.5:1). Ogni soglia mostra un chiaro badge Passa/Fallisce. Un'anteprima dal vivo renderizza testi grandi e normali nei colori scelti così puoi vedere l'effettivo impatto visivo. Un comodo pulsante campiona il colore di sfondo del corpo della pagina corrente, utile per verificare se una combinazione di colori su un sito reale è conforme. Tutto viene eseguito localmente nel tuo browser, nessun caricamento.
Utilizza la formula ufficiale della luminanza WCAG per calcolare il rapporto di contrasto. Il risultato è esatto e corrisponde a ogni controllo di accessibilità conforme.
Passa/Fallisce per AA normale (≥4.5:1), AA grande (≥3:1), AAA normale (≥7:1), AAA grande (≥4.5:1) — tutti mostrati in una griglia.
Renderizza testi reali grandi e normali nei colori scelti così vedi l'impatto visivo insieme al rapporto numerico.
Campiona con un clic il colore di sfondo del body calcolato della pagina corrente: utile per testare combinazioni nel mondo reale.
Digita un valore esadecimale o usa il selettore di colori nativo. I valori si sincronizzano bidirezionalmente mentre modifichi uno dei due.
L'inversione con un clic scambia primo piano e sfondo: utile per controllare temi invertiti o stati hover.
Prima di finalizzare una tavolozza di colori, controlla ogni colore del testo rispetto al suo sfondo per garantire la conformità WCAG AA — evita rifacimenti successivi.
Usa 'Preleva sfondo pagina' su un sito live, quindi incolla il colore reale del testo — trova violazioni di accessibilità in pochi minuti senza aprire Lighthouse.
Quando un marchio sceglie un colore che potrebbe fallire i test di accessibilità, usa il controllo per trovare la variante conforme più vicina (tonalità più scura/chiara).
Verifica che i colori degli stati hover/attivi/disabilitati soddisfino ancora i requisiti di contrasto, non solo quello predefinito.
I temi scuri spesso falliscono il contrasto per il testo grigio su grigio. Controlla i tuoi grigi più scuri sui tuoi sfondi più scuri per evitare questi errori.
Clicca sull'icona Contrasto nel dock di DevSuite Pro. Si aprirà un pannello con i campi per il colore di primo piano e di sfondo.
Usa il selettore di colori o incolla un valore esadecimali per ciascuno. L'anteprima dal vivo si aggiorna mentre cambi i colori.
Il numero grande (es. 4.8:1) è il rapporto di contrasto. Più alto è, meglio è. 3 è il minimo indispensabile; 4.5 è l'obiettivo per il testo normale.
I badge Passa/Fallisce per AA e AAA, per dimensioni del testo normale e grande, mostrano a colpo d'occhio per cosa si qualifica la tua combinazione.
In caso di fallimento, ritocca i colori. Scurisci il primo piano o schiarisci lo sfondo (o viceversa) finché il livello desiderato non mostra 'Passa'.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
