Verificatore di Contrasto: Calcolatore del Rapporto di Contrasto WCAG

Calcola il rapporto di contrasto WCAG tra due colori con il Verificatore di Contrasto. Ottieni risultati in tempo reale e valuta il contrasto dei tuoi colori.

Colors

Foreground (Text)

Background

Preview & Results

Sample Text

The quick brown fox jumps over the lazy dog.

21.00

Contrast Ratio

AAA

WCAG Grade

AA (normal text, 4.5:1)

AA Large (3:1)

AAA (7:1)

Verificatore di Contrasto: Calcolatore del Rapporto di Contrasto WCAG

Riepilogo rapido: Contrast Checker è uno strumento web che calcola il rapporto di contrasto WCAG tra due colori, fornendo risultati in tempo reale e valutando il contrasto dei colori.

Cosa fa questo strumento e le sue caratteristiche principali

Contrast Checker è uno strumento web che ti aiuta a calcolare il rapporto di contrasto WCAG tra due colori. Fornisce risultati in tempo reale e valuta il contrasto dei tuoi colori secondo gli standard WCAG (AA, AA Grande, AAA).

Guida passo-passo su come usarlo

Apri lo strumento Contrast Checker.
Scegli il colore del primo piano (testo) cliccando sul selettore colori o digitando il codice esadecimale nel campo di testo.
Scegli il colore di sfondo cliccando sul selettore colori o digitando il codice esadecimale nel campo di testo.
Visualizza il rapporto di contrasto e il grado visualizzati in tempo reale.

Formula sottostante / Logica tecnica

Il rapporto di contrasto viene calcolato utilizzando la seguente formula:

Rapporto di contrasto = (L1 + 0.05) / (L2 + 0.05)

Dove L1 e L2 sono i valori di luminanza relativa rispettivamente dei colori di primo piano e di sfondo.

Esempi pratici del mondo reale

Esempio 1: Primo piano: #000000 (nero), Sfondo: #ffffff (bianco) Rapporto di contrasto: 21.00, Grado: AAA
Esempio 2: Primo piano: #ffffff (bianco), Sfondo: #000000 (nero) Rapporto di contrasto: 21.00, Grado: AAA
Esempio 3: Primo piano: #808080 (grigio), Sfondo: #ffffff (bianco) Rapporto di contrasto: 4.50, Grado: AA

Matrice di confronto o decisione / Lista di controllo

Rapporto di contrasto	Grado WCAG
≥ 7.00	AAA
≥ 4.50	AA
≥ 3.00	AA Grande

Errori comuni e come evitarli

Errore: Utilizzare colori con rapporti di contrasto bassi. Come evitarlo: Controlla sempre il rapporto di contrasto e il grado prima di utilizzare i colori nei tuoi progetti.
Errore: Ignorare le linee guida WCAG per il contrasto dei colori. Come evitarlo: Usa Contrast Checker per assicurarti che i tuoi progetti soddisfino gli standard WCAG per l'accessibilità.

Domande Frequenti

Come calcola Contrast Checker il rapporto di contrasto?

Contrast Checker calcola il rapporto di contrasto utilizzando la formula (L1 + 0.05) / (L2 + 0.05), dove L1 e L2 sono i valori di luminanza relativa dei colori di primo piano e di sfondo.

Qual è la differenza tra i gradi AA, AA Large e AAA?

Il grado AA richiede un rapporto di contrasto ≥ 4.50, AA Large richiede un rapporto di contrasto ≥ 3.00 e il grado AAA richiede un rapporto di contrasto ≥ 7.00.

Come posso usare Contrast Checker per migliorare l'accessibilità del mio sito web?

Usa Contrast Checker per calcolare il rapporto di contrasto tra il testo e i colori di sfondo, e assicurati che soddisfi gli standard WCAG (AA, AA Large, AAA). Questo aiuterà a migliorare l'accessibilità del tuo sito web per gli utenti con disabilità visive.