Verificatore di contrasto colore
Inserisci due colori e vedi subito il rapporto di contrasto WCAG con indicazioni AA e AAA.
Inserisci colori di primo piano e sfondo in hex o RGB per calcolare istantaneamente il rapporto di contrasto WCAG, vedere risultati AA/AAA, anteprima del testo e suggerimenti di regolazione opzionali.
Come usare questo verificatore di contrasto colore
Digita o incolla un colore di primo piano e uno di sfondo. Lo strumento normalizza gli input validi in hex maiuscolo, calcola istantaneamente il rapporto di contrasto WCAG e mostra superato o non superato per le soglie AA e AAA. Usa Suggerisci correzione, condividi tramite URL o reimposta.
Soglie di rapporto di contrasto WCAG
WCAG 2.x richiede almeno 4,5:1 per testo normale (AA), 3:1 per testo grande (AA), 7:1 per testo normale (AAA) e 4,5:1 per testo grande (AAA). Questo strumento mostra sempre tutti e quattro i risultati per confrontare i livelli.
Formati colore supportati
Inserisci #RGB, #RRGGBB, rgb(r,g,b) o valori r,g,b separati da virgole. I canali devono essere interi da 0 a 255. Trasparenza alfa, hex a 8 cifre, HSL/HSLA e colori nominati CSS non sono supportati in v1.
Cosa significano superato e non superato
Superato significa che il rapporto calcolato raggiunge o supera la soglia indicata per quel livello. Non superato significa che non la raggiunge. Etichette e icone accompagnano il colore così i risultati sono comprensibili senza affidarsi solo al colore.
Domande Frequenti
Perché alfa e gradienti non sono supportati?
La versione 1 valuta solo colori sRGB completamente opachi. La miscelazione alfa e i gradienti richiedono regole di composizione che questo strumento non modella ancora; rgba(), hex a 8 cifre e analisi dei gradienti sono fuori dall'MVP.
Come viene calcolato il rapporto di contrasto?
Il verificatore usa la formula di luminanza relativa WCAG per colori sRGB opachi: linearizza ogni canale, calcola la luminanza e applica (più chiaro + 0,05) / (più scuro + 0,05). I rapporti mostrati sono arrotondati a due decimali; i controlli soglia usano il valore completo.
Cosa fa Suggerisci correzione?
Sposta in modo deterministico il colore di primo piano o sfondo selezionato lungo un percorso di luminosità verso nero o bianco fino a raggiungere il livello WCAG scelto, restituendo l'hex conforme più vicino e il rapporto risultante quando esiste.
Posso condividere una coppia di colori specifica?
Sì. Valori validi di primo piano, sfondo e dimensione testo si sincronizzano nei parametri URL (ad esempio ?fg=000000&bg=FFFFFF&size=normal) per collegare direttamente un risultato.
La pagina salva i miei colori?
I calcoli avvengono interamente nel browser. L'ultima coppia di colori valida può essere salvata in localStorage sul dispositivo per comodità; usa Reimposta per cancellare input, parametri URL e stato salvato.