Verifica Contrasto Colori

Controlla il rapporto di contrasto WCAG AA e AAA tra colori in primo piano e di sfondo

Prova un esempio

Colore in primo piano (testo)

Colore di sfondo

Testo grande di esempio (18px grassetto)

Esempio di testo normale — ecco come apparirà il corpo del testo rispetto al colore di sfondo scelto.

Rapporto di contrasto

14.63:1

Conformità WCAG

Superato

Normale AA

Superato

Normale AAA

Superato

Grande AA

Superato

Grande AAA

WCAG AATesto normale: 4.5:1, Testo grande (18px+ o 14px grassetto): 3:1

WCAG AAATesto normale: 7:1, Testo grande (18px+ o 14px grassetto): 4.5:1

Cos'è la verifica del contrasto dei colori?

La verifica del contrasto dei colori misura la differenza di luminanza tra un colore in primo piano (tipicamente il testo) e un colore di sfondo, esprimendo il risultato come rapporto. Un rapporto di 1:1 significa che i colori sono identici; 21:1 è il massimo, che rappresenta il nero su bianco o viceversa. Le Web Content Accessibility Guidelines (WCAG), pubblicate dal W3C, definiscono i rapporti minimi di contrasto che il testo deve rispettare affinché le persone con ipovisione o deficit di percezione dei colori possano leggerlo.

La formula del rapporto di contrasto proviene da WCAG 2.x e si basa sulla luminanza relativa, una misura della luminosità apparente di un colore all'occhio umano. La luminanza relativa viene calcolata linearizzando ogni canale sRGB (rimuovendo la gamma) e ponderando i canali secondo i coefficienti ITU-R BT.709: 0,2126 per il rosso, 0,7152 per il verde e 0,0722 per il blu. Il verde contribuisce maggiormente perché l'occhio umano è più sensibile alla luce verde. Il rapporto è quindi (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza del colore più chiaro.

WCAG definisce due livelli di conformità. Il livello AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo di dimensioni normali e di 3:1 per il testo grande (18px o superiore, o 14px in grassetto). Il livello AAA innalza la soglia a 7:1 e 4,5:1 rispettivamente. WCAG 2.1 ha inoltre introdotto il Criterio di successo 1.4.11, che richiede un rapporto di 3:1 per i componenti UI non testuali come bordi, icone e indicatori di focus.

Perché usare questo verificatore di contrasto?

Valutare il contrasto a occhio non è affidabile. Colori che appaiono distinti sul tuo schermo calibrato possono confondersi su uno schermo di bassa qualità, alla luce diretta del sole, o per chi soffre di deuteranopia. Un rapporto numerico elimina le congetture e fornisce un verdetto superato/non superato rispetto allo standard WCAG.

Calcolo istantaneo del rapporto
Scegli o digita due colori e osserva il rapporto di contrasto aggiornarsi in tempo reale. Nessun modulo da inviare, nessun ricaricamento della pagina.
🔒
Elaborazione con privacy garantita
Il calcolo della luminanza avviene interamente nel tuo browser. Nessun valore di colore lascia il tuo dispositivo e nessun cookie o strumento di analisi traccia le tue scelte.
🎯
Verdetti AA e AAA
I risultati mostrano lo stato superato/non superato per WCAG AA e AAA, sia per il testo normale che per quello grande, così sai esattamente quali soglie stai rispettando.
📋
Nessun account richiesto
Apri la pagina e inizia a verificare. Nessuna registrazione, nessun limite di utilizzo. Lo strumento funziona anche offline una volta caricata la pagina.

Casi d'uso del verificatore di contrasto

Sviluppo frontend
Prima di pubblicare una modifica all'interfaccia, incolla il colore del testo e lo sfondo dal tuo CSS nel verificatore per confermare che la coppia rispetti WCAG AA. Questo individua i problemi di contrasto prima che raggiungano la revisione del codice o i controlli automatizzati.
Passaggio di consegne dal design
I designer possono verificare che ogni coppia di colori in un file Figma superi il livello WCAG richiesto prima di passare le specifiche agli sviluppatori. Correggere il contrasto nella fase di design è molto meno costoso che farlo dopo l'implementazione.
Audit di accessibilità
I tester QA che eseguono un audit WCAG possono verificare manualmente specifiche combinazioni di colori segnalate da strumenti automatizzati come Lighthouse o axe. Il verificatore conferma il rapporto esatto e indica quali livelli vengono superati o meno.
Token del design system
Quando si definiscono token di colore per un design system, verifica ogni coppia primo piano/sfondo per assicurarsi che la palette rispetti almeno il livello AA. Documenta i rapporti insieme ai token in modo che i team a valle possano fidarsi delle scelte effettuate.
Test di template email
I client di posta rimuovono funzionalità CSS come l'opacità e le modalità di fusione, quindi i colori effettivamente renderizzati possono differire dal sorgente. Verifica i valori finali di primo piano e sfondo che arrivano nella casella di posta per controllare la leggibilità.
Studio degli standard di accessibilità
Gli studenti che imparano WCAG possono sperimentare diverse coppie di colori e vedere immediatamente come cambia il rapporto. Modificare un canale alla volta permette di sviluppare una comprensione pratica di come la luminanza si relaziona al contrasto percepito.

Requisiti di rapporto di contrasto WCAG

La tabella seguente riassume i rapporti minimi di contrasto richiesti da WCAG 2.1 per diversi tipi di contenuto e livelli di conformità. Il testo grande è definito come 18px (24 pixel CSS) o superiore a peso normale, o 14px (18,66 pixel CSS) o superiore a peso grassetto.

LivelloRapporto minimoSi applica aNota
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminanza, AA e AAA spiegati

Il calcolo del rapporto di contrasto si articola in tre fasi: calcolare la luminanza per ciascun colore, ricavare il rapporto e confrontarlo con le soglie WCAG.

Luminanza relativa
Un singolo numero da 0 (nero) a 1 (bianco) che rappresenta la luminosità apparente di un colore. Tiene conto della curva gamma sRGB non lineare e della diversa sensibilità dell'occhio umano al rosso, al verde e al blu. Il verde puro (#00FF00) ha una luminanza di 0,7152, mentre il blu puro (#0000FF) ha solo 0,0722.
WCAG AA
Il livello base di accessibilità richiesto dalla maggior parte degli standard legali, tra cui la Direttiva europea sull'accessibilità (EAA) e la Sezione 508 negli Stati Uniti. AA richiede un rapporto di 4,5:1 per il testo normale e di 3:1 per il testo grande. La maggior parte dei design system adotta AA come requisito minimo per tutti gli elementi testuali.
WCAG AAA
Il livello avanzato pensato per i contenuti che devono essere leggibili dal pubblico più ampio possibile, inclusi gli utenti con gravi problemi visivi. AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Pochi siti raggiungono AAA su tutte le pagine, ma i contenuti critici come avvisi legali e informazioni mediche spesso lo adottano come obiettivo.

Esempi di codice

Calcola i rapporti di contrasto WCAG a livello di codice. Ogni esempio implementa la formula della luminanza relativa da WCAG 2.x e il calcolo del rapporto di contrasto. Le stesse coppie nero su bianco e indigo su bianco vengono testate per confronto.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Domande frequenti

Qual è un buon rapporto di contrasto per il testo?
Per il corpo del testo sul web, punta ad almeno 4,5:1 (WCAG AA). Rapporti superiori a 7:1 soddisfano WCAG AAA e risultano più comodi per la lettura prolungata. Il nero su bianco produce il rapporto massimo di 21:1, ma un grigio molto scuro (#1e293b) su bianco offre comunque circa 12,6:1, ben al di sopra di AAA.
Cos'è il testo grande secondo WCAG?
WCAG definisce il testo grande come 18px (24 pixel CSS) a peso normale, o 14px (18,66 pixel CSS) a peso grassetto. Il testo grande ha una soglia di contrasto più bassa perché le lettere di dimensioni maggiori sono più facili da percepire. In CSS, 1px equivale a 0,75pt, quindi 18pt corrisponde a 24px.
WCAG AA è obbligatorio per legge?
In molte giurisdizioni sì. La Direttiva europea sull'accessibilità (EAA), in vigore da giugno 2025, fa riferimento a WCAG 2.1 AA. La Sezione 508 del Rehabilitation Act statunitense impone alle agenzie federali di rispettare WCAG 2.0 AA. L'Americans with Disabilities Act (ADA) è stato interpretato dai tribunali statunitensi come applicabile ai siti web, con WCAG AA come standard. Canada, Australia e Regno Unito hanno obblighi analoghi.
Come viene calcolata la luminanza relativa?
Il valore di ciascun canale sRGB (0-255) viene diviso per 255, quindi linearizzato: i valori pari o inferiori a 0,04045 vengono divisi per 12,92, mentre i valori superiori vengono trasformati con ((c + 0,055) / 1,055) ^ 2,4. I tre canali linearizzati vengono ponderati con i coefficienti ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) e sommati. Il risultato è un numero compreso tra 0 e 1.
Perché WCAG usa un offset di 0,05 nella formula del contrasto?
L'offset di 0,05 previene la divisione per zero quando uno dei colori è nero puro (luminanza = 0). Tiene inoltre conto della luce ambientale e dei riflessi dello schermo che alzano leggermente la luminanza percepita anche dei pixel più scuri. Senza questo offset, il nero su qualsiasi colore scuro produrrebbe un rapporto infinito o ingannevolmente elevato.
Due colori possono superare AA ed essere comunque difficili da leggere?
Sì. I rapporti di contrasto WCAG misurano la differenza di luminanza, non la differenza di tonalità. Un rosso saturo su verde saturo può tecnicamente superare la soglia del rapporto pur risultando scomodo da leggere per alcuni utenti, in particolare per chi ha una carenza visiva rosso-verde. Abbinare colori che differiscono sia per luminanza che per tonalità tende a produrre risultati più confortevoli.
Qual è la differenza tra il contrasto WCAG 2.x e APCA?
WCAG 2.x usa un semplice rapporto di luminanza che tratta primo piano e sfondo in modo simmetrico. APCA (Advanced Perceptual Contrast Algorithm), proposto per WCAG 3.0, utilizza un modello di luminosità percettiva che tiene conto della polarità: il testo scuro su sfondo chiaro ha un contrasto percepito diverso rispetto al testo chiaro su sfondo scuro con la stessa differenza di luminanza. APCA è ancora una bozza di lavoro e non ha sostituito il metodo WCAG 2.x in alcuna normativa.