risposta-alla-domanda-sullo-sviluppo-web-bd.com

Formula per il contrasto cromatico tra testo e sfondo

Nella mia Android un utente può scegliere il colore di un elemento. Questo colore viene quindi mostrato in background con un testo su di esso. Voglio visualizzare il testo in bianco o nero, a seconda del il colore di sfondo.

Esiste una formula per calcolare quando è meglio mostrare un testo in bianco e non in nero? Immagino di cercare l'oscurità di un colore e il valore esatto quando è più nero che bianco.

24
juergen d

Sì, c'è una formula. Ho scritto n articolo sui colori ad alto contrasto recentemente che rappresenta la variazione del bianco o nero (in realtà bianco sporco # f0f0f0 e bianco sporco # 101010) come colore di primo piano con il rapporto di contrasto più elevato, per le gamme di colori di sfondo.

Esiste anche un versione interattiva in SVG con descrizioni comandi dei rapporti di contrasto

rapporto di contrasto viene calcolato come (L1 + 0,05)/(L2 + 0,05), dove

  • L1 è il: luminanza relativa del più chiaro dei colori e

  • L2 è la luminanza relativa del più scuro dei colori.

I grafici che ho creato sono di seguito, insieme ad alcune delle mie note dall'articolo precedente.

Ogni cella di colore ha un cerchio:

  • Cerchi solidi: rapporto di contrasto <= 4.5
  • Cerchi spessi: rapporto di contrasto> 4.5 (conforme WCAG 2.0 AA per testo 14 pt)
  • Cerchi sottili: rapporto di contrasto> 7 (WCAG 2.0 AAA conforme per testo 14pt)

Nel primo grafico, la luminosità è una costante 128, mentre tonalità e saturazione variano:

enter image description here

È interessante vedere che il nero è generalmente molto meglio del bianco, tranne nei blu e nei rossi. Non c'erano gialli e verdi in cui il bianco era migliore e il nero ha un rapporto di contrasto di oltre 7 per una grande fascia di quei gialli e verdi, mentre il bianco fa fatica a ottenere il rapporto su 7 tranne nel blu più intenso e puro. Anche il divario nei viola dove eccelle di nuovo il nero è intrigante.

Nel secondo grafico, la saturazione è costante 255, mentre tonalità e luminosità variano:

enter image description here

Non sorprende che il bianco lavori su nero e nero su bianco, ma ancora una volta il nero domina nel complesso tranne nel blues. Il nero domina di più contro i gialli. Non ci sono molte sorprese qui, ma è convincente vedere le prove presentate in questo modo. A differenza della saturazione variabile, qui una grande maggioranza dei rapporti supera 7 (i cerchi sottili).

34
Roger Attrill

Dovresti scegliere il colore del testo in modo tale che criterio di successo 1.4.3, Contrasto (minimo), di WCAG sia soddisfatto. Si scopre che il rapporto di contrasto richiesto di 4,5 può essere soddisfatto con qualsiasi scelta di colore di sfondo e un algoritmo per scegliere il testo bianco o nero è abbastanza semplice.

Passaggio 1 : converti il ​​colore di input (sfondo nel tuo caso) in HSL. In realtà, hai solo bisogno della luminanza (o della luminosità). Vedere definizione di luminanza relativa in WCAG 2. per una formula da convertire dallo spazio RGB.

Passaggio 2 : formula per il rapporto di contrasto indicato nella definizione WCAG 2. può essere riorganizzato se sappiamo che il testo sarà nero (luminanza = 0) o bianco (luminanza = 1). Quindi, lascia che la luminosità del colore di input sia L, quindi:

  • Se L ≥ 0,175, il testo in nero va bene.
  • Se L ≤ 0,1833, il testo bianco va bene.

Esiste una piccola gamma di colori in cui entrambe le scelte soddisfano i requisiti di contrasto, pertanto è logico utilizzare un valore di cutoff in cui il rapporto di contrasto è uguale in entrambi i casi, che si verifica a 0,1791 ( soluzione alfa di Wolfram ). In alternativa, potresti allontanarti leggermente dall'uso di nero puro e bianco puro, ma dovrai ripetere l'algebra.

Nota che questa è una semplice prova algebrica del risultato ottenuto nella risposta data da @ roger-attrill. Ci sono molti più colori con una luminosità superiore a 0,175 che inferiore a 0,1833, quindi di solito il nero è la scelta migliore.

6
Steve Repsher