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.
Higher ratios are more readable. 21:1 is pure black on white.
See your color pair on both body and heading sizes.
Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.
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