Controllo del contrasto del colore

Controlla il contrasto di primo piano/sfondo rispetto a WCAG AA e AAA. Visualizza l'aggiornamento del rapporto mentre scegli i colori.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Controlla il contrasto tra primo piano e sfondo rispetto alle linee guida WCAG AA e AAA.
Funziona nel tuo browser
Gratuito da usare

Come usare

Scegli i colori del testo (in primo piano) e dello sfondo.
Leggere il rapporto di contrasto e i risultati AA/AAA.
Regola finché non superi il livello target.

How this tool works

Scegli i colori del testo (in primo piano) e dello sfondo.
Leggere il rapporto di contrasto e i risultati AA/AAA.
Regola finché non superi il livello target.

Recommended settings

Utilizza prima le opzioni predefinite, quindi modificale se necessario

Supported formats

Text / on-page input

File size and limits

Le anteprime multilivello molto complesse potrebbero risultare più lente sui telefoni più vecchi.

Privacy

I generatori di colori e CSS vengono eseguiti interamente nel tuo browser. Le anteprime e le conversioni non caricano mai i tuoi stili.

Common use cases

Utilizza il controllo del contrasto del colore ogni volta che ne hai bisogno: controlla il contrasto di primo piano/sfondo rispetto alle linee guida WCAG AA e AAA.

Troubleshooting

L'anteprima appare diversa dopo l'incollaggio

Verifica la presenza di CSS concorrenti sulla tua pagina (ripristini, colori ereditati). Copia prima la regola generata in un foglio di stile isolato.

FAQ

Questo carica il mio CSS?

No. Generatori e convertitori vengono eseguiti nel tuo browser con anteprima dal vivo.

Ho bisogno di un account?

No. Apri lo strumento, modifica i controlli e copia il CSS.