24

Sto cercando di migliorare un sito Web esistente e questo è quello che sto iniziando con:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

Trovo che questa combinazione di colori sia difficile da leggere. Altri non sono d'accordo, ma abbiamo concordato che dipende molto dal contrasto, dalla luminosità e da altre proprietà del display (anche dall'angolo di visione):

Ho già sperimentato un po ' -webkit-text-stroke, text-shadow(vedi il codice sopra), ma migliorando le cose su un display, peggiora su un altro.

Cos'altro posso provare a renderlo più leggibile su una varietà di display, mantenendo la combinazione di colori generale?

color website-design color-theory

— Bers
fonte

22

Sentiti libero di mostrare questo commento al tuo cliente. Ho molti anni di esperienza nel design e posso assicurarti che gli "altri" nella tua domanda sopra, che pensano che siano leggibili, sono completamente sbagliati :) L'intero schema dovrebbe essere cambiato perché è irreparabile.

— Mayersdesign

15

Ho oltre 30 anni di esperienza come designer ... Non potrei assolutamente essere più d'accordo con il commento di @mayersdesign sopra. tale combinazione di colori dovrebbe essere immediatamente respinta.

— Scott,

6

Innanzitutto, dovresti capire lo scopo della tua combinazione di colori. In una combinazione di colori per l'interfaccia utente, ha senso utilizzare colori neutri come colori primari, tutti i colori accentuati devono essere generati con parsimonia . Pensa ad esempio a YouTube, che colore ti viene in mente? Rosso e nero, ma dai un'occhiata alla pagina Web YouTube attuale, con il 98% di bianco e grigio chiaro. Il rosso è usato semplicemente come accento.

— Happy Hour Coding

Grazie a tutti (compresi i rispondenti)! Ho appena ricontrollato SE per vedere cosa mi sarei aspettato di essere 1 o 2 commenti da questa mattina, e ora questo. Ho imparato molto e ho ricevuto alcune argomentazioni convincenti - grazie!

— Bers

1

1995 chiamato. Vogliono indietro la loro combinazione di colori.

— Mazura

54

Cambia idea del cliente.

Non c'è nulla che possa risolvere il fatto che il testo rosso su uno sfondo blu è una scelta estremamente scadente per la leggibilità perché il contrasto è troppo basso e perché specificamente il rosso e il blu funzionano male come colori contrastanti.

Questo sito web webaim.org mostra che il contrasto tra i tuoi due colori è miseramente 1.52: 1

Il contrasto è importante per la leggibilità

Il contrasto del testo è uno degli aspetti più importanti della leggibilità del testo. Fortunatamente per noi, le Linee guida sull'accessibilità dei contenuti Web (WCAG) 2.0 affrontano in modo specifico il contrasto del testo e forniscono linee guida che, sebbene mirate a fornire accessibilità al web alle persone con disabilità, offrono anche una buona consulenza in generale.

Il livello AA del WCAG richiede un rapporto di contrasto di almeno 4,5: 1 per il testo normale e 3: 1 per il testo di grandi dimensioni e il livello AAA richiede un rapporto di contrasto di almeno 7: 1 per il testo normale e di 4,5: 1 per il testo di grandi dimensioni.

Quindi il sito web dei tuoi clienti è in diretta contraddizione con le linee guida professionali pubblicate . È anche in contraddizione con il gusto estetico (secondo la mia opinione professionale)

Se lo desideri, puoi comunque utilizzare elementi di rosso e blu in un disegno. Ma stendere il testo rosso di "dimensione del contenuto" su uno sfondo blu semplicemente allontanerà una grande percentuale di visitatori del tuo sito. Secondo me hai una responsabilità professionale per convincere il tuo cliente a non usarlo.

Speriamo che i link forniti potrebbero contribuire a rendere il vostro caso in modo più robusto che semplicemente sostenendo che si fatica a leggere. E 'infatti dimostrato essere difficile da leggere.

Chromostereopsis

Se ciò non fosse abbastanza convincente, prova questo: la Chromostereopsis è (brevemente!) Un'illusione ottica che causa problemi di profondità di campo agli spettatori. È spiacevole!

— mayersdesign
fonte

11

Per chiarire, i rapporti di contrasto nel documento W3C sono minimi . Non dire che il rapporto dovrebbe essere tra 4.5: 1 o 7: 1; dicono che dovrebbe essere almeno uno di quelli, a seconda del livello di accessibilità che stai prendendo di mira.

— Adrian McCarthy,

1

Ottimo punto, ho aggiornato la risposta per includere ulteriori dettagli, in particolare questo.

— Mayersdesign

8

Sebbene non sia assolutamente perfetto (o addirittura buono), l'aggiunta di un contorno bianco (o altro) al testo può aiutare con la leggibilità:

Questo potrebbe essere utile se il tuo cliente insiste nel mantenere i colori.

— folletto
fonte

Ad essere onesti, funziona solo con il tipo 36pt.

— user8356

Sì, grande idea. Non inteso come sarcasmo. E più lo applichi, meglio possiamo leggere il testo. Quindi prendi i contorni bianchi fino al bordo dello schermo ... Wink, wink.

— Martin Zaske,

8

Non puoi. Quelle sfumature di rosso e blu sono entrambi colori scuri e saturi, praticamente vibrano l'uno contro l'altro e quel testo farà sanguinare gli occhi delle persone. Qualsiasi sviluppatore o designer che non si preoccupa della leggibilità del testo dovrebbe essere eseguito fuori città su un binario rubino.

Prova a rendere il rosso MOLTO più leggero. Sembrerà rosa ma sarà più leggibile. Oppure usa bianco o giallo pallido su quello sfondo. Gli sfondi scuri sono notoriamente difficili da leggere. Puoi avere lo stesso colore generale - un blu verdastro - ma renderlo molto più chiaro. Ma il testo in rosso brillante non è mai facile da leggere, quindi vorrei solo scartare quella combinazione di colori per il testo.

— user8356
fonte

7

Come è stato sottolineato, questo è un orribile contrasto cromatico. È anche una cattiva tavolozza per le persone daltoniche (con il daltonismo rosso-blu, il rapporto di contrasto scende a qualcosa di dannatamente vicino a 1: 1, che è completamente illeggibile).

La tua scommessa migliore qui sarà convincere il cliente a non mescolare testo e sfondi colorati. Colora il testo o lo sfondo, non entrambi. Prova a caricare un modello in uno strumento che ti consente di simulare percezioni daltoniche (puoi trovare un paio di opzioni decenti online) e mostrare il risultato al tuo cliente, che dovrebbe aiutare in modo significativo a convincerle.

Se questa non è un'opzione, altre cose che puoi provare a migliorare la leggibilità includono (nota che nessuna di queste risolve il problema della daltonismo, aiutano solo con il contrasto o la leggibilità generale:

Usa un carattere mono-spaziato. Sembra stupido, ma questo in realtà aiuta la maggior parte delle persone a leggere il testo più facilmente. Ovviamente non Courier New, ma Bitstream Vera Sans Mono (o anche qualcosa come Droid Sans Mono) dovrebbe comunque apparire decente e sarà in qualche modo più leggibile.
Aumenta il peso del carattere e probabilmente anche la dimensione. Il testo più grande e più audace è più facile da leggere, indipendentemente dal contrasto.
Scambia la combinazione di colori (ovvero rendila blu scuro su uno sfondo rosso brillante). Sembra semplice, ma è generalmente più facile per la maggior parte delle persone preparare il blu scuro sul rosso brillante rispetto al contrario.
Aggiungi un'ombra discendente stretta ad alto contrasto al testo con un offset. Quello che vuoi qui non è una fusione con lo sfondo, è un bordo duro che offre un buon contrasto. Anche l'offset dell'ombra può essere d'aiuto, in particolare un semplice offset diagonale. Andrei anche qui con il nero anziché con il bianco (vuoi accentuare il testo, non lo sfondo, quindi cerca un contrasto elevato rispetto al testo). Nel complesso, qualcosa del genere text-shadow: 2px 2px 4px black;è probabilmente un discreto punto di partenza.
Alleggerire il rosso in modo significativo. In questo momento, stai usando rgb(255,0,0). Proverei prima con qualcosa di simile rgb(255,204,204)(o forse anche più leggero), e mi adeguerei da lì.
Scurisci il blu. Qualcosa di più vicino rgb(25,51,77)è circa la stessa tonalità, ma dovrebbe essere abbastanza scuro per rendere il testo più leggibile.

Un'altra opzione che aiuta anche alcuni con il problema della daltonismo:

Desaturare lo sfondo blu. Anche se non è l'opzione migliore (altera in qualche modo la combinazione di colori), ciò dovrebbe aiutare la leggibilità al massimo tra le altre cose che ho elencato, perché aumenterà attivamente il contrasto. Proverei a saturare del 30% circa (ovvero rgb(82,102,122)) come punto di partenza.

— Austin Hemmelgarn
fonte

6

Se hai già provato l'ombra del testo, penso che l'unica possibilità di mantenere gli stessi colori sia di estendere il testo

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

stili

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— Danielillo
fonte

1

O anche un bianco semplice e duro è meglio

— aloisdg dice Reinstate Monica il

1

quelli sono ancora difficili da leggere per me ..

— Happy Hour Coding

@Dylan cosa ne pensi jsfiddle.net/bersbers/xdkj76L3

— Bers

2

È leggibile. Non penso sia una buona idea. Ma può essere letto.

— Happy Hour Coding

blog.theteamw.com/2009/11/09/…

— yunzen

5

È necessario disporre di un rapporto di contrasto sufficientemente elevato tra sfondo e testo (oggetto in primo piano) affinché sia leggibile, con una razione di contrasto minima di 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance mostra che lo sfondo e il primo piano sono troppo vicini per essere leggibili.

A volte è necessario dire al cliente che la combinazione di colori non può essere completamente preservata e deve essere rivista per soddisfare i requisiti di leggibilità. Ovviamente, invertire il testo in un colore chiaro darebbe il contrasto sufficiente su sfondo scuro.

— Max Tokman
fonte

3

"Come si rende il testo più leggibile?" Insomma no! La combinazione di colori non soddisfa le linee guida sull'accessibilità del web e non deve essere utilizzata. È necessario utilizzare un colore di primo piano o di sfondo diverso. Non importa chi sia il tuo target di riferimento presunto, dovresti sempre mirare a soddisfare le persone con disabilità visive, e questa è una soluzione semplice.

Qui puoi vedere i rapporti di contrasto per le tue combinazioni di colori ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrea
fonte

2

(Non ci sono abbastanza punti per commentare)

Puoi provare ad aggiungere un tratto al testo. Sto usando il termine "tratto" nel senso di Photoshop, fondamentalmente il colore del bordo / contorno del testo per fungere da contrasto. Il bianco / nero dovrebbe andare bene (soprattutto se si gioca con lo spessore del tratto), ma immagino che anche alcune tonalità di rosso / blu potrebbero funzionare.

— allthemikeysaretaken
fonte

Come posso rendere più leggibile questa combinazione di colori?

Cambia idea del cliente.