Design

Controllo Contrasto Colori

Rapporto di contrasto WCAG per due colori.

Quasi prima di rendercene conto, eravamo già decollati.
1.00
Rapporto di contrasto
StandardTesto normaleTesto grande
WCAG AA
WCAG AAA
WCAG 1.4.11Componenti non testuali/UI (≥3:1): —

Alternativa di testo AA più vicinaCalcolo di un'alternativa OKLCH…

Questo rapporto segue i requisiti sul rapporto di contrasto di WCAG 2.2. APCA resta sperimentale e non costituisce un risultato di conformità a WCAG 3.

Scegli i colori? Convertitore di colori · biografie social: Generatore di testo fancy · bilance: Generatore di tonalità di colore.

Come usare

Scegli un colore del testo e un colore di sfondo. Il rapporto di contrasto e superamento/fallimento per ogni livello WCAG si aggiornano in tempo reale, con anteprima.

FAQ

Che cos'è un buon rapporto di contrasto?

WCAG AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande. AAA richiede rispettivamente 7:1 e 4.5:1. WCAG 1.4.11 richiede inoltre 3:1 per la grafica essenziale non testuale e per i bordi o gli stati dei componenti UI.

Cosa conta come testo grande?

Il testo grande è circa 18pt (24px) o 14pt (18.66px) in grassetto e più grande.

Come viene calcolato il rapporto?

Dalla luminanza relativa di entrambi i colori: (più chiaro + 0.05) ÷ (più scuro + 0.05), secondo la formula WCAG.

Ultimo aggiornamento: