Vai al contenuto principale
ImmaginiProcessado no seu navegador

Verifica Contrasto WCAG

Verifica il contrasto dei colori e la conformità WCAG AA/AAA con anteprima ed export.

0 di 3 utilizzi oggi · 3 rimanenti. Passa a Pro e rimuovi il limite.

Aggiorna

Verifica Contrasto WCAG

WCAG 2.1Elaborazione locale

Conformità WCAG 2.1 con anteprima live e suggerimento di colori accessibili.

Algoritmo
Primo piano
Regola primo piano0
Sfondo
Regola sfondo0
Anteprima live
Contenuto di esempio

Questo paragrafo dimostra la coppia di colori nel testo del corpo per una rapida validazione visiva del contrasto.

Testo di aiuto piccolo che richiede il massimo livello di contrasto.

Risultato

Diagnosi contrasto

Link condivisibile
Rapporto
9.7:1
Livello
AAA
Testo normale
AA · Superato
AAA · Superato
Testo grande
AA · Superato
AAA · Superato
Elementi UI
AA · Superato
APCA Lc
Lc
92.1
Polarità
Testo scuro / sfondo chiaro
Banda
Alto contrasto
Risultati per dimensione (APCA Bronze/Silver)
Didascalia 12px· normale · Lc min 90
Bronze · SuperatoSilver · Non superato
Corpo piccolo 14px· normale · Lc min 75
Bronze · SuperatoSilver · Superato
Corpo 16px· normale · Lc min 60
Bronze · SuperatoSilver · Superato
Sottotitolo 20px· medio · Lc min 60
Bronze · SuperatoSilver · Superato
Titolo 32px· grassetto · Lc min 45
Bronze · SuperatoSilver · Superato
Simulazione Deficit Visione Colore
Copertura stimata: 100%
Normale
Aa
9.7:1Supera AA
~92.987% della popolazione
Deuteranopia
Aa
16.1:1Supera AA
~6% della popolazione
Protanopia
Aa
14.7:1Supera AA
~1% della popolazione
Tritanopia
Aa
11.1:1Supera AA
~0.01% della popolazione
Acromatopsia
Aa
12.1:1Supera AA
~0.003% della popolazione
Suggerimento accessibile
La combinazione attuale supera già AA — nessun suggerimento necessario.
Coppie salvate0 coppie
Nessuna coppia salvata ancora.

§ Come usare

Come verificare il contrasto dei colori (WCAG)

Verifica il contrasto testo/sfondo secondo WCAG AA e AAA, con simulazione del daltonismo — nel browser.

  1. Scegli i colori

    Imposta i colori di primo piano (testo) e sfondo con i selettori o i campi HEX.

  2. Leggi il rapporto di contrasto

    Visualizza il rapporto di contrasto e verifica se supera WCAG AA e AAA per testo normale e grande.

  3. Simula e regola

    Anteprima delle modalità di daltonismo e modifica i colori finché il contrasto non è sufficiente.

Correlati

Strumenti correlati

Da mesma categoria.