Controllore del Contrasto dei Colori
Inserisci i colori di primo piano e di sfondo e il controllore restituisce il rapporto di contrasto WCAG (da 1:1 a 21:1) più i verdetti di superamento/fallimento rispetto alle soglie WCAG 2.1 AA e AAA per testo normale, testo grande ed elementi non testuali. Sotto il cofano utilizza la formula di luminanza WCAG, matematica semplice, ma critica per l’accessibilità. Risolvi i fallimenti modificando la luminosità finché il rapporto non supera la soglia che ti serve.
Come viene calcolato il rapporto di contrasto
-
1
Inserisci due colori
Hex, a 3 o 6 cifre, per entrambi i colori. Selettori di colore disponibili per ciascuno.
-
2
Luminanza relativa calcolata per ciascuno
L = 0.2126·R + 0.7152·G + 0.0722·B dove ogni canale è linearizzato da sRGB.
-
3
Rapporto di contrasto
(L_chiaro + 0.05) / (L_scuro + 0.05). Rapporti tra 1:1 e 21:1.
-
4
Badge di superamento / fallimento
AA (4.5:1 per normale, 3:1 per grande/UI), AAA (7:1 per normale, 4.5:1 per grande). Testo grande = ≥18pt normale o ≥14pt grassetto.
Soglie di contrasto WCAG
| Tipo di contenuto | Soglia AA | Soglia AAA |
|---|---|---|
| Testo normale | 4.5:1 | 7:1 |
| Testo grande (≥18pt normale o ≥14pt grassetto) | 3:1 | 4.5:1 |
| Non testuale (componenti UI, anelli di messa a fuoco) | 3:1 | - |
| Testo incidentale (decorativo, disabilitato, loghi) | esente | esente |
“Testo grande” significa peso normale di 18pt+ (~24px in CSS) o 14pt+ grassetto (~19px grassetto).
Contrasti di esempio
| Coppia | Rapporto | AA normale | AA grande | AAA normale |
|---|---|---|---|---|
| Nero su bianco | 21:1 | Supera | Supera | Supera |
| #333 su bianco | 12.6:1 | Supera | Supera | Supera |
| #666 su bianco | 5.7:1 | Supera | Supera | Fallisce |
| #888 su bianco | 3.5:1 | Fallisce | Supera | Fallisce |
| #AAA su bianco | 2.3:1 | Fallisce | Fallisce | Fallisce |
| Bianco su #1976D2 (Material blue 700) | 4.6:1 | Fallisce | Supera | Fallisce |
| Bianco su #2196F3 (Material blue 500) | 3.1:1 | Fallisce (normale) | Supera | Fallisce |
Errori comuni di accessibilità
- Testo del corpo grigio su bianco a #999 o più chiaro, fallisce AA. Usa #767676 o più scuro per il testo del corpo su bianco.
- Link blu su grigio: spesso fallisce perché entrambi i colori sono a luminanza media.
- Testo bianco su colore del marchio: supera su tonalità più scure (≥ 4.5:1), fallisce su colori del marchio a tonalità media. Usa testo più grande o un marchio più scuro.
- Testo segnaposto è spesso a basso contrasto per “suggerire”, la WCAG si applica ancora se gli utenti devono leggere il segnaposto.
- Stato disabilitato: la WCAG 2.2 richiede 3:1 per il testo disabilitato rispetto allo sfondo del controllo a meno che lo stato stesso non sia comunicato in altro modo.
Cosa non ti dice la WCAG
- La WCAG 2.x utilizza una formula del 1988. L’APCA moderna (algoritmo di contrasto percettivo avanzato) riflette meglio la leggibilità percepita, ma non è ancora la base legale. Aumenta leggermente i numeri oltre i minimi WCAG per gestire l’APCA e i casi limite.
- Il contrasto non è l’unica dimensione di accessibilità. Un rapporto di 21:1 non significa nulla se il carattere è 9px, l’altezza della linea è ristretta, o il colore del significato è rosso-verde.
Migliorare una coppia che fallisce
- Primo piano più chiaro su sfondo scuro, o primo piano più scuro su chiaro.
- Aumenta la dimensione o il peso del carattere, la soglia del testo grande è più bassa.
- Aggiungi uno sfondo dietro il testo su immagini (overlay, gradiente).
- Non risolvere il contrasto schiarendo a un grigio che fallisce ancora, spingi fino a raggiungere AA.
Ricontrolla dopo ogni regolazione, lo strumento ricalcola il rapporto in tempo reale e un piccolo cambio di luminosità può far cambiare rapidamente il verdetto.
Domande frequenti
AA è la base legale nella maggior parte delle giurisdizioni (Sezione 508 USA, EN 301 549 UE) e ciò che la maggior parte degli strumenti di audit segnala. AAA è aspirazionale, richiesto solo per contesti di accessibilità specifici (contenuti educativi per utenti con bassa visione). Punta a AA e considera AAA come un bonus.
No, accetta solo colori hex opachi, a 3 o 6 cifre. Converti prima RGB o HSL in hex, oppure usa il selettore di colore, che produce sempre hex.
La WCAG 2.1 SC 1.4.11 richiede un contrasto di 3:1 per i componenti UI non testuali e gli oggetti grafici. Questo si applica agli indicatori di messa a fuoco, ai bordi di input, ai pulsanti solo icona e agli stati (hover, attivo). Controlla sia gli stati predefiniti che quelli di messa a fuoco.
Testa ciascuna modalità separatamente, i rapporti di contrasto nei temi chiari e scuri sono indipendenti. Molti palette che superano in modalità chiara falliscono in modalità scura alla stessa luminosità relativa.
Strumenti correlati
Riferimento Tabella ASCII
Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Riferimento ai caratteri HTML
Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.
Riferimento scorciatoie da tastiera
Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.
Semplificatore di Algebra Booleana
Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.
Trova nome colore
Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.