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)

Questa è un'anteprima dello stile di testo grande per i titoli.

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 in primo piano e di sfondo e mostrare i risultati comuni per dimensione del testo.

Introduzione
Due colori CSS validi e testo di anteprima opzionale.
Formato di uscita
Un rapporto di contrasto con indicatori di superamento o fallimento WCAG AA e AAA.
Le limitazioni reali
Il calcolo copre solo il contrasto di luminanza; non certifica un'interfaccia o tiene conto del rendering dei font, del movimento, del focus o di segnali non cromatici.
Privacy e trattamento dei dati
Due colori CSS validi e un testo di preview opzionale vengono elaborati in questa scheda del browser. Convertr 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. Fornisci due colori CSS validi e un testo di anteprima opzionale nei controlli dello strumento.
  2. Scegli le impostazioni che influenzano un rapporto di contrasto con indicatori di superamento o fallimento WCAG AA e AAA, quindi esegui lo strumento.
  3. Rivedi un rapporto di contrasto con indicatori di superamento o fallimento WCAG AA e AAA prima di copiarlo o scaricarlo.

Modalità di errore comuni

I colori non validi non possono essere misurati, e la trasparenza senza uno sfondo risolto può rendere un rapporto privo di significato.

Un esempio utile

Confronta #1f2937 su #ffffff per valutare il suo rapporto per testo normale e grande.