Generatore palette accessibile WCAG (AA, AAA, Tailwind)

Crea una palette accessibile per il tuo design system conforme alle WCAG 2.2, con rapporti di contrasto in tempo reale ed esportazione Tailwind CSS.

Palette di colori accessibile: contrasti WCAG ed esempio

A partire da un colore di base, lo strumento costruisce una palette di 5 ruoli (sfondo, primario, accento, neutro scuro, tinta tenue) e poi misura il contrasto di ogni tinta su sfondo bianco e su sfondo scuro #0f172a. Il badge segue le soglie WCAG: 7:1 per AAA, 4,5:1 per AA, 3:1 per il testo grande (badge «AA testo grande»).

Il metodo

  • Il colore di base è convertito in HSL (tonalità, saturazione e luminosità mantenute con i loro decimali; solo il risultato RGB è arrotondato). Ogni armonia fissa 5 colori: in modalità complementare, sfondo (stessa tonalità, luminosità 95%), primario (luminosità riportata tra 35 e 65%), accento (tonalità + 180°, luminosità 50%), neutro scuro (saturazione 15%, luminosità 20%) e tinta tenue dell'accento (92%).
  • Luminanza relativa WCAG: ogni canale sRGB c = valore ÷ 255 viene linearizzato (c ÷ 12,92 se c ≤ 0,04045, altrimenti ((c + 0,055) ÷ 1,055)2,4), poi L = 0,2126 R + 0,7152 G + 0,0722 B.
  • Contrasto = (L chiara + 0,05) ÷ (L scura + 0,05).

Esempio ricalcolato

Base #3b82f6, modalità complementare (HSL 217,2°, 91,2%, 59,8%). Il primario resta #3b82f6, perché la sua luminosità è già compresa tra 35 e 65%: 3,68:1 su bianco, quindi solo AA testo grande, e 4,85:1 su #0f172a (AA). L'accento arancione #f29b0d regge solo su sfondo scuro (8,05:1, AAA; 2,22:1 su bianco). Il neutro #2b313b raggiunge 13,08:1 su bianco.

Limiti

  • Vengono testati solo due sfondi; il contrasto tra due colori della palette non viene misurato. Per convertire un solo colore tra HEX, RGB, HSL e CMYK e leggerne il contrasto su bianco e su nero, usa invece il convertitore di colori.
  • La soglia 3:1 vale per il testo grande (18 pt, o 14 pt in grassetto) e per i componenti dell'interfaccia (criterio 1.4.11), non per il testo corrente.
  • L'esportazione Tailwind riprende i 5 colori con i nomi surface, primary, accent, dark e support.

Fonti e date: W3C, WCAG 2.2 (criteri 1.4.3, 1.4.6 e 1.4.11, glossario «relative luminance»), Raccomandazione del 12/12/2024; soglia di linearizzazione 0,04045 (0,03928 prima di maggio 2021, senza effetto sui valori a 8 bit) (verificato il 14/10/2026).

Domande frequenti

Quale contrasto serve per il testo secondo le WCAG?

Il livello AA richiede almeno 4,5:1 per il testo corrente e 3:1 per il testo grande (18 pt, o 14 pt in grassetto). Il livello AAA sale a 7:1 e 4,5:1.

Perché il blu #3b82f6 non è conforme AA su sfondo bianco?

Il suo contrasto su bianco è di circa 3,7:1, sotto la soglia di 4,5:1 del testo corrente. Va bene per un pulsante o un titolo grande (3:1), non per un paragrafo.

Il bianco su un colore vivace è sempre leggibile?

No. Il bianco ha una luminanza relativa pari a 1: un arancione come #f29b0d offre solo 2,2:1 con esso. Sullo sfondo scuro #0f172a, lo stesso arancione raggiunge 8:1.

Quale standard WCAG applica lo strumento?

Le soglie di contrasto e la formula di luminanza delle WCAG 2.2, raccomandazione W3C del 12 dicembre 2024, identiche su questo punto alle WCAG 2.1. La linearizzazione usa la soglia 0,04045.

Lo strumento è davvero gratuito?

Sì, tutti gli strumenti di Kristools sono gratuiti al 100% e accessibili senza registrazione.

I miei dati sono protetti?

Sì. Tutte le elaborazioni vengono eseguite direttamente e in modo sicuro nel tuo browser. Nessun dato personale viene inviato ai nostri server.