Vai al contenuto principale
Bethemesh
Web e SEO

Verificatore di contrasto

Confronta un colore del testo e uno sfondo, calcola il rapporto di contrasto e verifica rapidamente le soglie WCAG AA e AAA.

  • Appunti

Integra questo widget

Personalizza il risultato, controlla l’anteprima e copia il codice.

Anteprima

Tipo di codice di integrazione

Codice da copiare

Responsive e ridimensionato automaticamente da Bethemesh.

Questo strumento ti è stato utile?

Come funziona questo strumento?

Questo strumento calcola il rapporto di contrasto tra un colore del testo e un colore dello sfondo con il metodo delle WCAG e indica se la combinazione supera le soglie AA e AAA. Serve a validare una palette prima di inserirla in un mockup, in un foglio di stile o in un componente, senza inviare i colori a un server.

Ogni colore esadecimale viene convertito in luminanza relativa: i canali rosso, verde e blu vengono linearizzati e pesati secondo la sensibilità dell’occhio (il verde pesa per oltre il 70 % della luminanza).

Il rapporto divide la luminanza più chiara più 0,05 per quella più scura più 0,05. Va da 1:1 (due colori identici) a 21:1 (nero su bianco) e non dipende dall’ordine dei due colori.

Il risultato viene confrontato con tre soglie: 4,5:1 per il testo normale in AA, 3:1 per il testo grande in AA e 7:1 per il testo normale in AAA. Un’anteprima mostra il testo nei due colori scelti.

Come usare questo strumento

  1. Scegli il colore del testo

    Inserisci o seleziona il colore dei caratteri.

  2. Scegli il colore dello sfondo

    Indica il colore dello sfondo su cui compare il testo.

  3. Leggi il rapporto e i livelli

    Il rapporto appare con Conforme o Non conforme per AA testo normale, AA testo grande e AAA testo normale.

  4. Regola fino al livello voluto

    Scurisci il testo o schiarisci lo sfondo a piccoli passi e verifica di nuovo.

Formula del rapporto di contrasto WCAG

Il rapporto confronta la luminanza relativa dei due colori.

Rapporto di contrasto

Rapporto = (L1 + 0,05) ÷ (L2 + 0,05), dove L1 è la luminanza del colore più chiaro

Lo 0,05 rappresenta la luce ambientale riflessa dallo schermo.

Luminanza relativa

L = 0,2126 × R + 0,7152 × G + 0,0722 × B, con canali linearizzati tra 0 e 1

Un canale c (valore su 255 diviso per 255) vale c ÷ 12,92 se è al massimo 0,03928, altrimenti ((c + 0,055) ÷ 1,055)^2,4.

L_1
Luminanza del colore più chiaro
L_2
Luminanza del colore più scuro
R_s, G_s, B_s
Canali rosso, verde e blu linearizzati

Casi d’uso

Validare un’identità visiva

Verificare che un colore di marca resti leggibile come testo su sfondo bianco o scuro prima di usarlo in tutto il sito.

Correggere un audit di accessibilità

Trovare la tonalità più vicina che raggiunge 4,5:1 quando un audit segnala un grigio troppo chiaro.

Scegliere il colore di un pulsante

Confrontare l’etichetta di un pulsante con il suo sfondo, poi provare gli stati hover e disabilitato.

Esempi

Grigio #777777 su sfondo bianco

Questo grigio molto diffuso manca di poco la soglia AA: va bene per un titolo grande, non per un paragrafo.

Input

Colore del testo: #777777 · Colore dello sfondo: #ffffff

Risultato

Rapporto di contrasto: 4.48:1 · AA testo normale: Non conforme · AA testo grande: Conforme · AAA testo normale: Non conforme

Grigio #595959 su sfondo bianco

Un grigio più deciso raggiunge esattamente la soglia AAA di 7:1 restando più morbido del nero puro.

Input

Colore del testo: #595959 · Colore dello sfondo: #ffffff

Risultato

Rapporto di contrasto: 7.00:1 · AA testo normale: Conforme · AA testo grande: Conforme · AAA testo normale: Conforme

Consigli e buone pratiche

  • Si considera testo grande quello di 24 px (18 pt) normale o 18,66 px (14 pt) in grassetto; sotto questa misura punta a 4,5:1.
  • Per un testo su immagine o sfumatura, verifica la zona dello sfondo più sfavorevole.
  • Icone e bordi dei campi seguono un altro criterio WCAG (1.4.11), che chiede 3:1 rispetto ai colori adiacenti.
  • Un rapporto conforme non basta da solo: un testo molto sottile o molto piccolo può restare difficile da leggere.

Fonti e riferimenti

Domande frequenti

Che cos’è un rapporto di contrasto?

È la luminanza del colore più chiaro divisa per quella del più scuro, ciascuna più 0,05. Va da 1:1 per due colori identici a 21:1 per nero su bianco.

Quali soglie bisogna raggiungere?

Per il livello AA, 4,5:1 per il testo normale e 3:1 per il testo grande. Per il livello AAA, 7:1 per il testo normale. AA è il livello richiesto dalla maggior parte delle normative, tra cui la norma europea EN 301 549 recepita dalle linee guida AgID.

Perché #777777 su bianco non è conforme?

Il suo rapporto è 4.48:1, appena sotto 4,5:1. Lo strumento non arrotonda a tuo favore: con 4,48 il testo normale non raggiunge AA.

L’ordine dei due colori cambia il risultato?

No. La formula mette sempre al numeratore il colore più chiaro: testo bianco su blu e testo blu su bianco danno lo stesso rapporto.

La trasparenza viene considerata?

No. Lo strumento confronta due colori opachi. Per un colore semitrasparente, calcola prima il colore ottenuto sullo sfondo e verifica quello.

I colori vengono inviati da qualche parte?

No. Il calcolo avviene nel tuo browser e i colori non lasciano il tuo dispositivo.

Strumenti correlati

Continua con questi strumenti

Strumenti simili o complementari a questo.

Strumenti simili

Generatore di slug

Trasforma un titolo o una frase in uno slug pulito e utilizzabile in un URL.

Web e SEOUsa questo strumento

Validatore URL

Valida, normalizza e analizza indirizzi web localmente.

Web e SEOUsa questo strumento

Leggi anche

GuidaBuone pratichePrincipiante

Contrasto WCAG: come rendere accessibili i colori?

Comprendi le soglie di contrasto WCAG, misura una combinazione di colori e correggi i casi che ostacolano la lettura o l’uso dell’interfaccia.

31 agosto 20264 min