Verificatore di contrasto colore
Verifica istantaneamente il rapporto di contrasto tra il colore del testo e il colore di sfondo e la conformità agli standard di leggibilità (WCAG AA)
Caratteristiche
Verifica istantanea del rapporto di contrasto
Visualizza la conformità WCAG AA inserendo semplicemente il colore del testo e il colore di sfondo
Supporta sia il selettore che il codice colore
Specifica i colori incollando HEX, formato abbreviato o rgb() oppure selezionandoli
Anteprima di due dimensioni di testo
Visualizza istantaneamente come appare il testo normale e l'intestazione
Applica il colore conforme con un clic
Applica immediatamente i colori suggeriti che variano la luminosità mantenendo la tonalità
Come usare
Specifica il colore del testo
Seleziona usando il selettore di colore o inserisci un codice colore in uno di questi formati: #333333, #333 o rgb(51, 51, 51)
Specifica il colore di sfondo
Specifica il colore di sfondo nello stesso modo. I risultati si aggiornano mentre digiti, senza bisogno di premere alcun pulsante
Controlla il rapporto, la conformità e l'anteprima
Visualizza il rapporto di contrasto, la conformità per il testo normale e il testo grande, una valutazione sintetica e come appare il testo di esempio
Applica il colore suggerito e verifica di nuovo
Se non conforme, applica i colori conformi usando i pulsanti di suggerimento come "Cambia il colore del testo in...". Puoi anche scambiare il colore del testo e il colore di sfondo con il pulsante di scambio
Casi d'uso
Verifica della combinazione di colori di diapositive e materiali
Verifica se il colore del testo e il colore di sfondo dei materiali interni e delle diapositive sono leggibili prima della creazione
Controllo della combinazione di colori del sito web
Verifica se la combinazione di colori del sito o del banner è conforme agli standard di accessibilità (WCAG AA)
Determinazione dell'uso del colore del marchio nel corpo del testo
Quando usi il colore del marchio come colore del testo, decidi quanto scurire per renderlo utilizzabile nel corpo del testo
Correzione della combinazione di colori non conforme
Correggi la combinazione di colori segnalata in un colore conforme mantenendo la tonalità
Conoscenze di base
Cos'è il rapporto di contrasto
Il rapporto di contrasto è un indicatore che esprime la differenza di luminosità tra il colore del testo e il colore di sfondo con valori da 1:1 a 21:1. La combinazione di nero e bianco ha il massimo di 21:1, mentre colori identici hanno il minimo di 1:1.
- Come funziona il calcolo：Il rapporto di contrasto viene calcolato convertendo due colori nella luminosità relativa sRGB, quindi dividendo aggiungendo 0,05 sia alla luminosità più brillante che a quella più scura.
- Guida ai valori numerici：Rispetto a uno sfondo bianco (#FFFFFF), il grigio #777777 ha un rapporto di contrasto di 4,47:1, #999999 di 2,84:1 e il nero (#000000) di 21:1.
Differenza tra AA e AAA del WCAG
WCAG è una linea guida internazionale sull'accessibilità dei contenuti web che stabilisce due livelli di standard per il rapporto di contrasto: AA e AAA.
- AA (livello standard)：AA è lo standard che richiede 4,5:1 o superiore per il testo normale e 3,0:1 o superiore per il testo grande, ed è il livello target per i siti web generici.
- AAA (livello più rigoroso)：AAA è lo standard che richiede 7:1 o superiore per il testo normale e 4,5:1 o superiore per il testo grande, mirando a essere leggibile anche per le persone con visione ridotta.
Definizione di testo grande
Il testo grande secondo WCAG si riferisce a testo di circa 18 punti (24px) o superiore, o testo in grassetto di 14 punti (circa 18,7px) o superiore.
- Testo normale：Il testo normale è di dimensioni non incluse nel testo grande, come il corpo e le note, e richiede un rapporto di contrasto di 4,5:1 o superiore.
- Relazione con i titoli：Anche i titoli sono trattati come testo normale se sotto i 24px e non in grassetto, quindi è necessario controllare sia la dimensione che lo spessore.
Sicurezza e privacy
Elaborazione nel browser
I dati inseriti vengono elaborati solo all'interno del tuo browser e non vengono inviati all'esterno.
Elaborazione solo nel browser
Calcolo del rapporto di contrasto e suggerimento dei colori viene elaborato interamente nel tuo browser e i dati di input non vengono inviati ai server.
Comunicazione crittografata con HTTPS
Il caricamento della pagina è crittografato con TLS e il contenuto non può essere letto da terze parti.
Nessun invio a terze parti
I dati di input non vengono inviati a servizi esterni come reti pubblicitarie o tracker.
Nessun salvataggio automatico dei risultati
Colore del testo e colore di sfondo inseriti e i suggerimenti di input non vengono archiviati sui server.
Segui RAKKOTOOLS nella ricerca Google
194 strumenti utili, più facili da trovare dalla ricerca Google e dalla ricerca AI!
- Trovabili nella ricerca
- Mostrato anche nella ricerca AI
- Scopri nuovi strumenti
Informazioni sugli aggiornamenti
- update #337
Aggiunto il Color Contrast Checker per valutare la leggibilità tra il colore del testo e il colore di sfondo