Italiano
Verifica il contrasto dei colori WCAG e correggi le combinazioni non conformi con un clic.
Ultimo aggiornamento
Coddy ti insegna facendoti scrivere codice vero nel browser: lezioni interattive, feedback immediato e aiuto dall'AI quando ti blocchi.
Un *contrast checker* è lo strumento che designer e sviluppatori usano prima di rilasciare una schermata. Calcola il **rapporto di contrasto** tra due colori, il testo e lo sfondo dietro di esso, con la formula definita nelle Web Content Accessibility Guidelines (WCAG). Più alto è il rapporto, più il testo è facile da leggere.
Le WCAG definiscono tre soglie. **3:1** è il minimo per i titoli grandi (24px o più in peso normale, 18.66px o più in grassetto) e per il bordo visibile dei componenti interattivi come pulsanti, campi dei moduli e icone. **4.5:1** è il minimo AA per il testo normale, l'asticella a cui punta la maggior parte dei team. **7:1** è il livello AAA, il più alto, che dà un supporto solido a chi ha una vista ridotta.
Il contrasto **non** è la stessa cosa di quanto due colori sembrino vivaci. Due colori di brand accesi possono comunque essere difficili da leggere se la loro *luminanza* è simile. Questo strumento applica la formula della luminanza WCAG a ogni canale, riporta il rapporto esatto e valuta ogni contesto, così non devi tirare a indovinare.
Scrivi o incolla un valore HEX, oppure usa il selettore colore. Il primo piano è il testo o l'icona; lo sfondo è ciò che sta dietro.
Il numero grande a sinistra è il rapporto di contrasto WCAG. Sotto 3:1 è rischioso per qualsiasi interfaccia; sotto 4.5:1 non passa per il testo normale.
Tre righe mostrano se passa o no per il testo normale (4.5/7), il testo grande (3/4.5) e i componenti dell'interfaccia (3:1). Punta alle spunte verdi su ogni riga che il tuo design usa davvero.
Quando AA non passa, lo strumento può alzare o abbassare la luminosità del primo piano, mantenendo la tonalità, finché la coppia non passa. Clicca di nuovo per AAA.
Quando entrambi i colori passano nei contesti che ti servono, copia lo snippet CSS (color: + background:) e incollalo nel tuo foglio di stile o nel file dei design token.
Incrocia ciò che stai stilizzando con il livello che ti serve. Fonte: WCAG 2.2 Understanding 1.4.3 e 1.4.11.
| Elemento | Minimo AA | Minimo AAA | Note |
|---|---|---|---|
| Testo normale (< 18pt in peso normale) | 4.5 : 1 | 7 : 1 | Regola di base per paragrafi, etichette, didascalie |
| Testo grande (≥ 18pt in peso normale o ≥ 14pt in grassetto) | 3 : 1 | 4.5 : 1 | Titoli, testi hero, citazioni grandi |
| Componenti dell'interfaccia e oggetti grafici | 3 : 1 | - | Bordi dei pulsanti, campi dei moduli, icone, anelli di focus |
| Logo o pura decorazione | Esente | Esente | Loghi e testo incidentale sono esenti, ma l'usabilità conta comunque |
| Stato disabilitato | Esente | Esente | I controlli inattivi sono esenti, ma non approfittarne per rilasciare impostazioni predefinite a basso contrasto |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Il classico grigio ardesia scuro su quasi bianco. Passa AAA per il testo normale (≥ 7:1) con margine. La maggior parte delle interfacce di prodotto dovrebbe puntare a questi valori di default.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */I blu vivaci su bianco finiscono spesso intorno a 4:1: leggibili per i titoli grandi (passano il 3:1 AA per testo grande) ma sotto l'asticella di 4.5:1 per il testo normale. Usalo per pulsanti ed etichette di CTA da 18px in su, non per i paragrafi.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Il giallo acceso su bianco è una trappola famosa: i colori sembrano forti ma la loro luminanza è troppo vicina. Non passa nessun livello. Riserva questa combinazione agli sfondi scuri (ad es. #facc15 su #1f2937 arriva a ≈ 12:1).
placeholder e disabled vicino al limite WCAG. Sono entrambi esenti dalle WCAG, ma esente non vuol dire leggibile.