Poi controlla due colori rispetto a WCAG AA e AAA e vedi il testo sullo schermo. Converti un colore tra HEX, RGB, HSL, HSV e OKLCH, e prova se il testo si legge facilmente sul suo sfondo. È gratis e funziona nel tuo browser.
Come convertire un colore
- Usa Scegli per scegliere un colore, oppure scrivi o incolla un valore in Qualsiasi colore.
- Leggi lo stesso colore come HEX, RGB, HSL, HSV, OKLCH e il suo nome CSS se ce n'è uno.
- Premi Copia accanto al formato che vuoi, oppure Copia HEX.
Come controllare il contrasto
- Scegli un Colore del testo e un Colore di sfondo, oppure usa Usa il colore principale come testo o Usalo come sfondo.
- Leggi il rapporto di contrasto e se supera AA e AAA per il testo normale, il Testo grande a 24px, il Testo in grassetto a 19px e un Contorno del pulsante.
- Se la coppia non passa, usa il colore vicino suggerito che passa.
Quale formato usare
HEX e RGB descrivono la luce rossa, verde e blu di un colore e funzionano ovunque. HSL e HSV descrivono tonalità, saturazione e luminosità o brillantezza, il che rende più facile ritoccare un colore a mano. OKLCH è il formato CSS più recente: la sua luminosità corrisponde a come le persone vedono la luminosità dei colori, quindi due colori con la stessa L sembrano davvero ugualmente chiari, il che lo rende ottimo per palette e temi. Tutti i browser moderni supportano oklch() in CSS.
Come funziona il rapporto di contrasto
Il rapporto confronta la luminanza relativa dei due colori, da 1:1 per colori identici a 21:1 per nero su bianco. I risultati non vengono mai arrotondati per eccesso, quindi 4,49:1 non supera AA. Se il colore del testo è trasparente, viene prima mescolato con lo sfondo. Quando una coppia non passa, viene suggerito un colore vicino che passa per l'uno o l'altro lato.
WCAG AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande. AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Rispettarli aiuta le persone con ipovisione e chiunque legga su uno schermo luminoso.
Input che questo strumento capisce
HEX a tre, quattro, sei e otto cifre con o senza #, rgb() e rgba() con virgole o spazi, hsl() con deg, turn o rad, hsv(), oklch() e oklab(), i 148 nomi di colori CSS e numeri semplici come 59, 130, 246. L'alfa dopo una barra o come quarto valore viene mantenuto.
Chi lo usa
Web designer e sviluppatori che creano un tema, titolari di piccole attività che controllano che i colori del brand siano leggibili, studenti che creano presentazioni e chiunque abbia un colore in un formato e ne abbia bisogno in un altro. Per trovare un colore da una foto, usa il selettore di colore da immagine.
Domande
Qual è un buon rapporto di contrasto?
Punta ad almeno 4,5:1 per il testo normale. Più alto è meglio, e 7:1 soddisfa il livello AAA.
Perché gli stessi valori di colore sembrano leggermente diversi su schermi diversi?
La luminosità e il colore degli schermi variano. I numeri sono gli stessi, ma lo schermo cambia il modo in cui appaiono.
Viene caricato qualcosa?
No. La conversione avviene nel tuo browser.