Loading...
Loading...
Testa qualsiasi coppia di colori di testo e sfondo rispetto ai requisiti di contrasto WCAG 2.2 AA e AAA, con feedback immediato di pass/fail e un'anteprima dal vivo.
Rapporti più alti sono più leggibili. 21:1 è puro nero su bianco.
Guarda la tua coppia di colori sia su dimensioni del corpo che del titolo.
Testo normale del corpo a 16 pixel. WCAG 2.2 misura il contrasto tra il testo in primo piano e il suo sfondo immediato — questa anteprima mostra la combinazione che hai inserito sopra esattamente come un utente la vedrebbe.
Un controllo del contrasto misura la differenza di luminanza tra due colori e la riporta come un rapporto tra 1:1 (identico) e 21:1 (nero puro su bianco puro). Le linee guida per l'accessibilità utilizzano quel rapporto per decidere se il testo è leggibile per utenti con scarsa visione, daltonismo o schermi visualizzati alla luce solare intensa. Questo strumento segue WCAG 2.2 — lo stesso standard citato dall'ADA negli Stati Uniti, dalla Legge Europea sull'Accessibilità e dalla maggior parte dei sistemi di design aziendali. Inserisci due colori qualsiasi e ottieni un pass/fail immediato attraverso le cinque soglie WCAG, oltre a un'anteprima dal vivo sia per le dimensioni del corpo che del titolo. Tutto funziona nel tuo browser — nessun upload, nessun tracciamento, nessun account.
Incolla un codice esadecimale o usa il selettore di colori per il colore del primo piano (testo). Lo strumento accetta anche abbreviazioni a 3 cifre come #03A.
Fai lo stesso per lo sfondo. Se conosci solo il colore del testo, lascia lo sfondo su bianco (#FFFFFF) per il test predefinito.
Il grande numero del rapporto si aggiorna mentre digiti. Un rapporto inferiore a 3.0 fallirà anche la soglia WCAG più permissiva per il testo normale.
I cinque badge mostrano pass/fail per le soglie di testo normale AA, testo grande AA, testo normale AAA, testo grande AAA e componenti UI. AA è il minimo legale abituale; AAA è l'obiettivo migliorato per contenuti chiave.
Verifica che l'anteprima sembri corretta nelle dimensioni del titolo e del corpo, quindi usa Copia CSS per acquisire le dichiarazioni `color:` e `background-color:` per il tuo foglio di stile.
Per ogni canale (R, G, B scalato da 0 a 1): c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4 Luminanza relativa: L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear Rapporto di contrasto: rapporto = (L_light + 0.05) / (L_dark + 0.05) dove L_light = max(L1, L2) e L_dark = min(L1, L2)
La formula proviene dalle WCAG 2.x e applica una curva di correzione gamma a ciascun canale sRGB prima di calcolare la luminanza. I pesi (0.2126, 0.7152, 0.0722) riflettono la sensibilità dei coni umani alla luce rossa, verde e blu. Aggiungere 0.05 a entrambi i termini previene la divisione per zero quando un colore è nero perfetto. I rapporti variano da 1:1 (colori identici) a 21:1 (nero puro su bianco puro).
Riferimento: WCAG 2.2 — Contrasto (Minimo) 1.4.3
| Coppia | Rapporto & verdetto |
|---|---|
#000000 su #FFFFFF | 21:1 — supera ogni soglia Il contrasto massimo canonico. Usato per interfacce di lettura a lungo termine. |
#1A73E8 su #FFFFFF | 4.63:1 — supera AA normale, fallisce AAA normale Blu di Google su bianco. Legale per il testo del corpo, non proprio AAA. |
#808080 su #FFFFFF | 3.95:1 — fallisce AA normale, supera AA grande Grigio medio su bianco — buono per i titoli, troppo chiaro per i paragrafi. |
Converti tra HEX, RGB e HSL con campioni dal vivo, cursori e copia istantanea.
Calcola la tua età esatta in anni, mesi e giorni a partire da qualsiasi data di nascita.
Controlla l'indice di massa corporea in base all'altezza e al peso utilizzando unità metriche o imperiali.
Calcola percentuali, variazione percentuale e percentuale di un totale in pochi secondi.
Ultimo aggiornamento