Un convertitore di colori con controllo di contrasto WCAG
Il designer manda un codice HEX, ma il foglio di stile, un plugin o la tipografia chiedono un'altra notazione. Il convertitore di colori parte da #3b82f6, un blu medio, e lo mostra come rgb(59, 130, 246), hsl(217, 91%, 60%) e cmyk(76%, 47%, 0%, 4%). Accanto c'è un controllo di contrasto WCAG 2.1 per un colore di testo e uno sfondo.
Quattro passaggi per un colore e una coppia di contrasto
- Clicca sul riquadro del colore per aprire il selettore del browser, oppure incolla un codice nel campo HEX. Funzionano le sei cifre e la forma breve a tre (#0af), con o senza #.
- Leggi i campi RGB, HSL e CMYK (stampa). Il pulsante di copia sopra ogni campo porta il valore negli appunti.
- Nel pannello di destra imposta Colore del testo e Sfondo.
- Il rapporto e i quattro indicatori (AA Normale, AAA Normale, AA Grande, AAA Grande) cambiano a ogni scelta.
Un blu aziendale e un grigio da segnaposto
Un blu aziendale arriva come #003366. In CSS vuoi varianti più chiare e più scure, e con HSL è facile: lo strumento dà hsl(210, 100%, 20%) e alzi solo l'ultimo numero. Per un volantino lo stesso blu è cmyk(100%, 50%, 0%, 60%), un primo valore da dare alla tipografia.
Un grigio chiaro da segnaposto come #999999 su bianco dà 2.85 : 1 e non supera AA nemmeno per il testo grande. Il bianco sul #2563eb predefinito dà 4.68 : 1: supera AA per il testo normale, ma non AAA.
Cosa accetta il campo HEX, come si arrotonda e cosa resta nel browser
Solo il campo HEX e il selettore guidano la conversione. I campi RGB e HSL sembrano modificabili, ma scriverci non cambia nulla. CMYK è di sola lettura.
Il campo HEX si riscrive appena il contenuto è un codice valido. Se digiti #ff0 mentre vai verso #ff0000, il campo salta a #ffff00: incolla il codice completo. Non sono supportati codici a otto cifre (alfa), nomi come «tomato» e notazioni come OKLCH o HSV. L'input non valido viene ignorato senza messaggio d'errore.
HSL e CMYK sono arrotondati a numeri interi. CMYK è la semplice conversione matematica da RGB, senza profilo ICC, quindi una tipografia può ottenere un risultato diverso. Il rapporto di contrasto è mostrato con due decimali, ma il test usa il valore esatto: 4.496 appare come 4.50 : 1 e non supera comunque AA. I due selettori del contrasto lavorano separati dal convertitore e accettano solo colori del selettore. Lo strumento non conosce la dimensione del tuo testo. WCAG considera grande il testo da 18 pt, o 14 pt in grassetto.
Conversione e contrasto girano in JavaScript nel tuo browser. Scegliere o digitare un colore non invia nessuna richiesta, come mostra il pannello di rete degli strumenti per sviluppatori. I pulsanti di copia scrivono negli appunti. Il codice dello strumento non salva i tuoi colori.