Controllo Contrasto (WCAG 2.1)
Controlla il contrasto testo/sfondo rispetto agli standard WCAG.
Suggerisce automaticamente i colori conformi e rilascia certificati.
🔤 Colore Testo
🎨 Colore Sfondo
Questa è un'anteprima del testo normale (16px)
Questo è il testo in grassetto (16px bold)
Questo è un testo grande (24px)
Questo è un testo grande e in grassetto (18px bold)
Rapporto di Contrasto
12.63 : 1
Testo Normale AA
≥ 4.5:1
Testo Grande AA
≥ 3:1
Testo Normale AAA
≥ 7:1
Testo Grande AAA
≥ 4.5:1
💡 Colori suggeriti per soddisfare lo standard AA:
Regola il colore del testo:
Regola il colore dello sfondo:
🏆 Certificato di conformità WCAG AA
* Cliccando 'Condividi su 𝕏' verrà anche salvato automaticamente il certificato.
📋 Codice CSS
Informazioni
Uno strumento gratuito per verificare istantaneamente se le combinazioni di colori del tuo web o app soddisfano gli standard di contrasto WCAG 2.1. Un basso contrasto rende il testo difficile da leggere per le persone con disabilità visive.
Quando i tuoi colori non superano il test, lo strumento suggerisce automaticamente il colore conforme più vicino, aiutandoti a migliorare l'accessibilità senza cambiare drasticamente il tuo design.
Una volta superato lo standard AA, puoi salvare un certificato ufficiale di conformità WCAG AA per condividerlo.
Come usare
Inserisci Colori
Fai clic sul selettore colore o digita un codice HEX/RGB direttamente per il testo e lo sfondo.
Controlla Risultati
Il rapporto di contrasto e lo stato WCAG AA/AAA si aggiornano in tempo reale con un'anteprima.
Rilascia Certificato
Se superi la soglia AA, puoi salvare un certificato ufficiale e condividerlo facilmente.
Glossario
- Rapporto di Contrasto
- Un valore numerico che rappresenta la differenza di luce tra il colore di primo piano e quello di sfondo. Varia da 1:1 (nessuna differenza) a 21:1 (nero su bianco).
- WCAG (Web Content Accessibility Guidelines)
- Standard internazionali stabiliti dal W3C che definiscono come rendere i contenuti web più accessibili. I governi di tutto il mondo ne impongono la conformità.
- Standard AA
- L'obiettivo medio per il contrasto. Il testo normale richiede un rapporto di almeno 4.5:1, mentre il testo grande (18pt+) richiede 3:1. Questo è il limite legale per la maggior parte degli ambienti aziendali.
- Standard AAA
- Lo standard WCAG più severo che mira a esigenze di accessibilità specializzate. Richiede 7:1 per il testo normale e 4.5:1 per il testo grande. Può limitare fortemente le scelte di design.
- Luminanza Relativa
- La luminosità relativa di qualsiasi punto in uno spazio colore. Sfrutta calcoli gamma matematici per l'adattamento alla percezione dell'occhio umano assegnando un punteggio ai colori su una scala da 0 a 1.
- Accessibilità (a11y)
- La pratica di creare ambienti utilizzabili per le persone con disabilità, inclusi problemi visivi, cognitivi e declino legato all'età.
FAQ
- Q.Qual è il rapporto di contrasto raccomandato per il testo web?
- Secondo gli standard WCAG AA, il testo normale richiede un rapporto minimo di 4.5:1. Il testo grande (in genere 18pt o 14pt grassetto) richiede solo 3:1.
- Q.Questo strumento simula il daltonismo?
- No, questa versione si concentra esclusivamente sulla verifica matematica dei rapporti di contrasto. Si prega di utilizzare un software dedicato alla simulazione del daltonismo insieme a questo strumento.
- Q.Come fa l’algoritmo a calcolare il rapporto?
- Implementa l’esatta formula raccomandata dalle WCAG calcolando la luminanza relativa di entrambi i colori e confrontandoli utilizzando la scala (L1 + 0.05) / (L2 + 0.05).
- Q.Dovrei puntare alla conformità AA o AAA?
- Lo standard di settore globale e il requisito legale per la maggior parte delle operazioni commerciali è il livello AA. L’AAA è molto restrittivo ed è generalmente richiesto solo per piattaforme governative o per disabilità specializzate.
- Q.I dati sui colori del mio brand vengono inviati a un server cloud?
- Mai. Tutte le analisi cromatiche e il rendering dei certificati avvengono interamente nel tuo browser, all’interno della memoria locale del dispositivo, garantendo la totale privacy aziendale.
- Q.Posso inserire colori utilizzando formati diversi dai codici HEX?
- Sì, oltre ai formati HEX (come #ffffff), puoi anche selezionare visivamente i colori utilizzando il selettore di colori o inserire direttamente i valori delle coordinate RGB.
- Q.Il certificato generato è legalmente vincolante?
- È una prova matematica affidabile delle combinazioni superate secondo le formule del W3C, ma non sostituisce un audit di accessibilità completo di terze parti.
Casi d’uso
Validazione Design Web
Verifica il contrasto durante la progettazione per garantire la conformità WCAG per landing page e siti aziendali.
Revisione UI App Mobile
Controlla il testo dei pulsanti e le etichette per la leggibilità da parte di utenti con disabilità visive.
Conformità Accessibilità
Verifica i siti per problemi di contrasto per soddisfare i requisiti ADA, EN 301 549 o WCAG a livello globale.
Presentazioni
Assicurati che i colori del testo di diapositive e documenti siano innegabilmente leggibili in modo affidabile da tutto il pubblico.
Invia feedback
Facci sapere la tua opinione per aiutarci a migliorare lo strumento.
Il feedback è temporaneamente sospeso
Il server è occupato o la protezione antispam è attiva. Riprova più tardi.