Simulatore di Contrasto WCAG
Avanzato calcolatore di contrasto WCAG 2.1 / 2.2 e simulatore di accessibilità. Testa testo, componenti UI, gradienti e simula il daltonismo in tempo reale.
Il Design Accessibile è Importante
Questo è un paragrafo di esempio per dimostrare come i colori selezionati vengono resi insieme. Un buon contrasto garantisce leggibilità per tutti.
Select a simulation mode below to apply filters to the live preview area.
If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.
Current colors pass WCAG AA. No fixes needed!
Suggested Compliant Variants:
Export your selected colors as CSS variables, Tailwind configuration, or design tokens.
Testo Normale
Testo Grande
Componenti UI
FAQ Simulatore Contrasto Accessibilità
Come Usare il Verificatore di Contrasto
-
Imposta i colori testo e sfondo
Inserisci il colore del testo (foreground) e il colore di sfondo usando i selettori colore o digitando i valori HEX, RGB o HSL. Il rapporto di contrasto si aggiorna istantaneamente. -
Leggi il risultato WCAG
Lo strumento mostra il rapporto di contrasto (es. 5.2:1) e se supera WCAG AA (4.5:1 per testo normale) e AAA (7:1). Il testo grande (18pt+) ha soglie più basse. -
Simula il daltonismo
Passa alla scheda Simulatore per vedere come la tua combinazione di colori appare agli utenti con Deuteranopia, Protanopia, Tritanopia o altri tipi di visione. -
Usa Auto-Correzione se necessario
Se i colori non superano il test, clicca Auto-Correzione. Lo strumento calcola la tonalità conforme AA o AAA più vicina preservando al massimo la tua tonalità e saturazione originale.
Riferimento Rapporti di Contrasto
Requisiti minimi di contrasto WCAG 2.1 per diverse categorie di testo:
| Tipo di Contenuto | WCAG AA | WCAG AAA | Rapporto Esempio |
|---|---|---|---|
| Testo normale (<18pt) | 4.5:1 ✓ | 7:1 ✓ | #000 on #fff → 21:1 |
| Testo grande (≥18pt grassetto) | 3:1 ✓ | 4.5:1 ✓ | #333 on #fff → 12.6:1 |
| Componenti UI e icone | 3:1 ✓ | N/A | #767676 on #fff → 4.5:1 |
| Elementi decorativi | Nessun req. | Nessun req. | Immagini di sfondo esenti |
Casi d'Uso Comuni
Revisione UI / Design Visivo
Testa ogni combinazione testo-sfondo nel tuo design system prima del passaggio agli sviluppatori, individuando le non conformità in anticipo.
Audit di Accessibilità
Fornisci rapporti di contrasto documentati per i clienti e le certificazioni di conformità WCAG 2.1 / 2.2.
Test per Daltonismo
Simula come l'8% degli utenti maschi percepisce la tua palette per garantire che nessuna informazione critica vada persa per gli utenti daltonici.
Conformità Legale
Rispetta i requisiti di accessibilità digitale ADA (USA), EAA (EU) e EN 301 549 prima del lancio del prodotto o delle gare pubbliche.
QA per Sviluppatori
Verifica rapidamente il contrasto delle variabili CSS durante le revisioni del codice, senza passare a uno strumento di design.
Come Funziona
Tutti i calcoli vengono eseguiti nel tuo browser usando la formula di luminanza WCAG 2.1 — nessun contatto con i server richiesto.
WCAG definisce la luminanza come una somma ponderata dei canali RGB linearizzati: L = 0.2126R + 0.7152G + 0.0722B. Il rapporto di contrasto è poi (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro.
Il simulatore applica le matrici di daltonizzazione standard (Machado et al., 2009) per trasformare i valori sRGB come percepiti da ogni tipo di deficit di visione del colore.
Auto-Correzione itera sul canale della luminosità nello spazio HSL, trovando la regolazione minima che raggiunge il rapporto target (AA o AAA) mantenendo invariati tonalità e saturazione.
A Chi è Destinato Questo Strumento
Designer UI/UX
Testa le combinazioni di colori prima del passaggio al team di sviluppo e mantieni un design system conforme.
Specialisti dell'Accessibilità
Produci prove di contrasto per audit WCAG, report per i clienti e certificazioni di conformità.
Sviluppatori Frontend
Verifica rapidamente le variabili CSS dei colori durante lo sviluppo e le revisioni del codice senza uscire dal browser.
Product Manager
Garantisci la conformità legale all'accessibilità (ADA, EAA) prima del lancio del prodotto o della presentazione a gare pubbliche.
Creatori di Contenuti
Verifica che il testo sovrapposto a immagini o sfondi colorati sia leggibile da tutti i destinatari.
Consigli per un Design Accessibile Migliore
- Punta sempre a WCAG AA (4.5:1) come baseline minima, e mira ad AAA (7:1) per il testo del corpo — soprattutto su siti sanitari, governativi e finanziari.
- Esegui la simulazione del daltonismo per tutti gli 8 tipi, non solo la Deuteranopia. Ogni tipo influisce in modo diverso sulle coppie di colori.
- Non affidarti mai al solo colore per trasmettere informazioni — abbina sempre gli indizi cromatici a icone, pattern o etichette testuali.
- Usa HSL per regolare il contrasto: aumenta la differenza di luminosità tra primo piano e sfondo invece di cambiare la tonalità.
- Testa su un dispositivo mobile fisico sotto la luce solare diretta — le condizioni reali rivelano problemi di contrasto che i monitor nascondono.
Perché il Contrasto di Accessibilità è Importante
- Circa 1 uomo su 12 e 1 donna su 200 hanno qualche forma di deficit della visione dei colori — un contrasto inadeguato esclude direttamente questi utenti.
- L'ADA (USA) e l'European Accessibility Act (EU 2025) richiedono la conformità WCAG 2.1 AA per i prodotti digitali rivolti al pubblico.
- Il contrasto insufficiente è uno dei 3 problemi WCAG più comuni rilevati negli audit di accessibilità a livello globale (rapporto WebAIM Million).
- Un design cromatico accessibile migliora la leggibilità per tutti gli utenti — alla luce solare, su display di bassa qualità e con l'invecchiamento.
Prestazioni e Privacy
Ogni calcolo del contrasto, simulazione del daltonismo e auto-correzione viene eseguito interamente nel tuo browser tramite JavaScript. Nessun valore di colore, screenshot o dato d'uso viene mai trasmesso a qualsiasi server. Lo strumento risponde in meno di 5 ms per calcolo e funziona offline dopo il primo caricamento della pagina.
Nota Educativa: WCAG e Visione dei Colori
WCAG 2.1 vs 2.2
WCAG 2.2 (2023) ha introdotto nuovi criteri di successo (2.4.11 Aspetto del Focus, 3.2.6 Aiuto Coerente) ma ha mantenuto i requisiti di contrasto principali (1.4.3, 1.4.6) identici a quelli della 2.1.
Luminanza vs Luminosità
WCAG usa la luminanza relativa — una misura pesata percettivamente. Un giallo brillante (#ffff00) ha luminanza molto alta (0.93) mentre un blu scuro (#003366) ha luminanza bassa (0.02), producendo un rapporto di 9.8:1.
Tipi di Daltonismo
La Deuteranopia (rosso-verde, più comune) colpisce ~6% degli uomini. La Protanopia (cecità al rosso) ~2%. La Tritanopia (blu-giallo) ~0.01%. L'Acromatopsia (daltonismo totale) ~0.003%.
APCA — Il Futuro Standard
L'Advanced Perceptual Contrast Algorithm (APCA) è proposto per WCAG 3.0. Valuta il contrasto in modo diverso in base a dimensione del font, peso e polarità — tieniti aggiornato.
Risoluzione dei Problemi
Lo Sapevi?
La formula del rapporto di contrasto WCAG è stata introdotta per la prima volta in WCAG 1.0 (1999) come semplice controllo della differenza di luminosità. È stata significativamente rivista in WCAG 2.0 (2008) per usare la luminanza relativa — un modello basato sullo spazio colore CIE 1931 e su come il sistema visivo umano elabora la luce. La soglia attuale di 4.5:1 è stata scelta perché compensa approssimativamente la perdita di contrasto di 3:1 vissuta dagli utenti con visione 20/80 (ipovisione senza tecnologia assistiva).
Crea Prodotti Utilizzabili da Tutti
Il contrasto cromatico accessibile non è solo una casella da spuntare per la conformità — è una qualità di design fondamentale che avvantaggia ogni utente. Questo strumento gratuito ti offre verifica WCAG in tempo reale, simulazione del daltonismo e auto-correzione intelligente in un unico posto, senza che alcun dato lasci il tuo browser. Testa la tua palette ora, correggi le non conformità e lancia un prodotto che funziona per tutti.