Controllo del Contrasto dei Colori
Assicurati che il tuo sito web sia leggibile da tutti. Il nostro Controllo del Contrasto di Colore gratuito calcola il rapporto esatto tra i colori del tuo testo e dello sfondo, verificando la conformità alle linee guida di accessibilità WCAG.
Sample Heading
This is an example paragraph to test readability and visual contrast.
WCAG 2.1 Compliance Status
Cos'è il Controllo del Contrasto dei Colori - Strumento di Accessibilità WCAG?
Il Controllore del Contrasto di Colore è un'utilità per l'accessibilità web. Valuta matematicamente la luminanza relativa di un colore di primo piano (testo) rispetto a un colore di sfondo per determinare se vi è una differenza visiva sufficiente affinché gli utenti ipovedenti possano leggere comodamente il testo.
Come usare il Controllo del Contrasto dei Colori - Strumento di Accessibilità WCAG
- Inserisci il codice HEX per il colore del tuo testo/prima pagina.
- Inserisci il codice HEX per il colore di sfondo.
- Lo strumento calcola il rapporto di contrasto (ad esempio, 4,5:1).
- Mostra un punteggio di Pass/Fail per gli standard WCAG AA e AAA.
Esempio
Testi un testo nero puro (#000000) su uno sfondo bianco puro (#FFFFFF). Lo strumento calcola il massimo rapporto di contrasto possibile di esattamente 21:1, superando facilmente tutti i requisiti di accessibilità AAA.
Comprendere i risultati
Un rapporto più alto significa che il testo è più facile da leggere. Le Linee guida per l'accessibilità dei contenuti Web (WCAG) richiedono un rapporto minimo di 4,5:1 per il testo normale (standard AA) e di 7:1 per un'accessibilità rigorosa (standard AAA).
Casi d'uso comuni
- Audit di accessibilità web: garantire che un sito web aziendale non violi le leggi sulla conformità ADA riguardanti la leggibilità.
- Design UI/UX: Verificare se un testo segnaposto grigio chiaro all'interno di un campo di input bianco è troppo difficile da leggere.
- Linee guida del marchio: Verificare che i colori del marchio possano essere sovrapposti in sicurezza l'uno sull'altro nelle grafiche di marketing.
Come funziona
Lo strumento converte entrambi i codici HEX in RGB, applica una formula matematica specifica per calcolare la 'luminanza relativa' di entrambi i colori, e poi divide la luminanza più chiara per quella più scura. Il risultato è un rapporto compreso tra 1:1 (nessun contrasto) e 21:1 (massimo contrasto).
Suggerimenti e note sulla precisione
- •Il testo grande (oltre 18pt o 14pt in grassetto) è più facile da leggere, quindi le WCAG richiedono solo un rapporto minimo di 3:1 per superare lo standard AA.
- •Il daltonismo influisce sulla percezione dei colori, ma il contrasto di luminanza relativa rimane il fattore più importante per la leggibilità.
Domande frequenti
Cosa succede se i miei colori non superano il controllo?
Se falliscono, il tuo testo sarà molto difficile da leggere per le persone con problemi di vista o daltonismo. Dovresti scurire il colore del testo o schiarire il colore dello sfondo finché il rapporto non raggiunge almeno 4,5:1.
È 21:1 il miglior contrasto?
Matematicamente, sì. Tuttavia, testo nero puro su sfondi bianchi puri (21:1) può causare affaticamento visivo o 'alone' per alcuni utenti con dislessia. Il grigio molto scuro (ad esempio, #222222) su bianco sporco è spesso preferito.
Strumenti correlati
Selettore di colore
Cerchi la tonalità esatta di blu per lo sfondo del tuo sito web? Il nostro Selettore di Colori online gratuito ti permette di selezionare visivamente i colori e ti fornisce i codici esatti di cui hanno bisogno sviluppatori e designer.
Generatore di Tavolozza di Colori
Iniziando un nuovo progetto di design ma sei bloccato sui colori? Il nostro Generatore di Palette di Colori gratuito crea automaticamente schemi di colori sorprendenti e matematicamente bilanciati per stimolare la tua creatività.
Convertitore da HEX a RGB
Hai un codice colore esadecimale ma hai bisogno dei valori RGB per aggiungere un canale di opacità in CSS? Il nostro convertitore HEX in RGB gratuito traduce istantaneamente le stringhe di colore esadecimale in valori interi standard di Rosso, Verde, Blu.
Formatta JSON Online Gratis
Lavorare con dati JSON non formattati può essere un problema per gli sviluppatori. Il nostro strumento Formatta JSON online semplifica l'abbellimento e la convalida delle stringhe. Che tu stia effettuando il debug di un'API o scrivendo file di configurazione, questo strumento fornisce una corretta indentazione.
Popolare
Calcolatore di Età
Vuoi sapere esattamente quanti anni hai, fino al giorno? Il nostro calcolatore di età gratuito ti fornisce una risposta precisa in pochi secondi: anni, mesi, giorni, il numero totale di giorni vissuti e un conto alla rovescia fino al prossimo compleanno. Tutto viene elaborato localmente nel tuo browser — la tua data di nascita non lascia mai il tuo dispositivo.
Calcolatore di percentuale
Hai difficoltà con la matematica delle percentuali? Il nostro Calcolatore di Percentuali gratuito gestisce tutte le domande standard sulle percentuali istantaneamente, dal calcolo degli sconti alla determinazione delle tasse.
Disclaimer: Questo strumento calcola il contrasto basato sull'algoritmo standard WCAG 2.1 per la luminanza relativa.