Contrasto colori WCAG AA e AAA

Verifica il contrasto colori WCAG 2.2 AA e AAA, prova dimensioni del testo e trova alternative cromatiche accessibili.

Passa su un campo o selezionalo per vedere l’aiuto. Premi Esc per chiuderlo.

Primo pianoSfondoSfondo di base opaco

Usa HEX, RGB, RGBA o HSL. I colori trasparenti vengono composti sullo sfondo di base opaco.

5.84:1

Le soglie vengono verificate sul rapporto completo, senza arrotondamenti.

WCAG 2.2
Livello	Utilizzo	SC	Minimo	Esito
AA	Testo normale	1.4.3	4.5:1	Superato
AA	Testo grande	1.4.3	3:1	Superato
AAA	Testo normale	1.4.6	7:1	Non superato
AAA	Testo grande	1.4.6	4.5:1	Superato
AA	Componenti di interfaccia e grafica	1.4.11	3:1	Superato

Testo di anteprimaDimensione carattere (CSS px)Grassetto

Aa — fiokit.

Testo normale: AA ✓ · AAA ✗

Testo grande: almeno 24 CSS px, oppure 18,67 CSS px in grassetto (14 pt).

Obiettivo del colore suggeritoRapporto

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Testo normale (SC 1.4.3): PASS — 4.5:1
AA Testo grande (SC 1.4.3): PASS — 3:1
AAA Testo normale (SC 1.4.6): FAIL — 7:1
AAA Testo grande (SC 1.4.6): PASS — 4.5:1
AA Componenti di interfaccia e grafica (SC 1.4.11): PASS — 3:1

Verifica le coppie di colori, non la conformità WCAG completa. Valuta separatamente colori adiacenti, stati interattivi e contenuti reali.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Come funziona

Imposta primo piano, sfondo e base opaca. Gli esiti AA e AAA si aggiornano subito. Prova dimensione e grassetto, applica un colore suggerito o scarica il rapporto.

Un esempio pratico

Colori

#155bdf

Domande frequenti

Il mio testo viene inviato al server?

No. Il contenuto viene elaborato in questo browser, non viene inviato al server né salvato.

Quali limiti ha Contrasto colori WCAG AA e AAA?

Mostra soglie distinte per testo ed elementi grafici. Il controllo dei colori non certifica la conformità WCAG completa.