Un cliente manda il grigio del suo marchio e chiede di usarlo per i paragrafi. Prima di dire sì, conviene verificare il contrasto dei colori con un numero. Inserisci colore del testo e colore di sfondo: il rapporto compare mentre scrivi. Con #777777 su bianco il risultato è 4.47:1.
Dove si perde il mezzo punto
Il rapporto viene troncato dopo due decimali, non arrotondato. Un 4,496 diventa 4.49:1 e non supera il 4,5. Arrotondando si leggerebbe 4.50 e passerebbe un abbinamento sotto soglia. L’esempio mostra la stessa cosa: il valore reale è circa 4,478 e viene mostrato 4.47.
Le cinque righe dell’esito
AA richiede 4,5 per il testo normale e 3 per il testo grande. AAA richiede 7 e 4,5. La quinta riga, componenti UI e grafica, richiede 3. Il testo è grande da 18 pt (24 px) in su, oppure da 14 pt (18,67 px) in su se in grassetto.
Procedura per correggere un abbinamento
- Scrivi il Colore del testo o sceglilo con il selettore. Campo e selettore restano allineati.
- Inserisci il Colore di sfondo. Sono accettati
#rgb,#rrggbbergb(r, g, b). Un altro formato mostra un errore sotto il campo. - Leggi rapporto e righe. Se AA per testo normale non passa, compare il colore di testo più vicino che raggiunge 4,5:1.
- Premi Usa questo colore per applicarlo, oppure Scambia i colori per provare testo chiaro su sfondo scuro.
Come nasce il colore suggerito
Tonalità e saturazione restano uguali. Cambia solo la luminosità, a passi di 0,1 punti percentuali, verso lo scuro e verso il chiaro. Viene mostrato il risultato più vicino all’originale. Per l’esempio è circa #767676.
Che cosa lo strumento non valuta
Confronta due colori opachi. Il canale alfa, come in rgba() o in un esadecimale a otto cifre, non è accettato. Un testo su una foto o su un gradiente non ha un solo sfondo: controlla tu il punto peggiore. Lo strumento non conosce nemmeno dimensione e peso del carattere che usi davvero.
I colori restano sul tuo dispositivo
Il calcolo avviene nella pagina. Non parte nessuna richiesta e i colori non vengono salvati. Puoi verificarlo nella scheda Rete degli strumenti per sviluppatori.