Controllo di contrasto colorato WCAG

Valuta il rapporto di contrasto dei colori del testo e dello sfondo secondo le linee guida WCAG 2.1. Genera istantaneamente regolazioni di colore accessibili.

HEX/RGB/HSL
HEX/RGB/HSL
Tutto viene eseguito localmente nel browser.

Anteprima Testo in Tempo Reale

Titolo Grande (18pt Grassetto / 24pt Normale)

Questo è un prevedimento del grande stile di testo di titolo.

Testo Normale (Sotto 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rapporto di Contrasto

18.6:1

Stato di Conformità WCAG 2.1

Requisiti WCAG AA
Testo Normale (4.5:1) PASS
Testo Grande (3.0:1) PASS
Requisiti WCAG AAA
Testo Normale (7.0:1) PASS
Testo Grande (4.5:1) PASS

Linee Guida WCAG 2.1

Verifica facilmente gli standard di contrasto per costruire interfacce accessibili che rispettino le linee guida della Sezione 508, ADA e WCAG AA o AAA.

Motore di Suggerimenti

Adattare automaticamente i colori incrementalmente lungo le coordinate HSL per trovare le alternative più vicine che soddisfano i criteri di rapporto di contrasto.

Completamente Lato Client

I calcoli vengono eseguiti localmente all'interno del contesto del tuo browser. Nessun colore, file o coordinate di telemetria vengono trasmessi ai nostri server.

Strumenti Colore Correlati

Convertitore di colori HEX RGB HSL
Converti colori e regola le coordinate di luminosità.
Selettore Colore Immagine
Estrai palette di colori da mockup di design.
Convertitore di colori CSS
Convertire tra formati CMYK, HSV, RGB, HSL e HEX.

Verificatore Contrasto Colore

Calcolare i rapporti di contrasto WCAG per i colori di sfondo e di sfond e mostrare i risultati comuni di testo-size.

Introduzione
Due colori CSS validi e testo previsorio opzionale.
Formato di uscita
Un rapporto di contrasto con i WCAG AA e AAA passano o falliscono gli indicatori.
Le limitazioni reali
Il calcolo copre solo il contrasto luminante; non certificerà un'interfaccia o un account per la renderizzazione di font, movimento, focalizzazione o non colorati.
Privacy e trattamento dei dati
Due colori CSS validi e un testo di preview opzionale vengono elaborati in questa scheda del browser. Converter non riceve o memorizza; chiudere o ricaricare la pagina rende il lavoro più semplice se l'outil non offre esplicitamente una download locale.

Come utilizzare questo strumento

  1. Fornire due colori CSS validi e testo previsorio opzionale nei controlli degli strumenti.
  2. Scegli le impostazioni che influenzano un rapporto di contrasto con WCAG AA e AAA pass o indicatori falliti, quindi eseguire l'output.
  3. Verifica un rapporto di contrasto con WCAG AA e AAA pass o indicatori falliti prima di copiare o scaricare.

Modalità comuni di fallimento

I colori invalidi non possono essere misurati, e la trasparenza senza un background risoluto può rendere una relazione senza senso.

Un esempio utile

Confronta il testo #f2106 su #fff per valutare la sua relazione tra testo normale e grande.