24

J'essaie d'améliorer un site Web existant, et voici ce que je commence par:

<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>

Je trouve que cette combinaison de couleurs est difficile à lire. D'autres ne sont pas d'accord, mais nous avons convenu que cela dépend beaucoup du contraste, de la luminosité et d'autres propriétés d'affichage (même l'angle de vue):

Je l' ai déjà expérimenté un peu avec -webkit-text-stroke, text-shadow(voir code ci - dessus), mais comme j'améliorer les choses sur un seul écran, il y a pire sur un autre.

Que puis-je faire d'autre pour rendre cela plus lisible sur une variété d'écrans, tout en conservant la palette de couleurs globale?

color website-design color-theory

— bers
source

22

N'hésitez pas à montrer ce commentaire à votre client. J'ai de nombreuses années d'expérience en conception, et je peux vous assurer que les "autres" dans votre question ci-dessus, qui pensent que c'est lisible, ont tout à fait tort :) Le schéma complet devrait être changé car il est irréparable.

— mayersdesign

15

J'ai plus de 30 ans d'expérience en tant que designer ... Je ne pourrais pas être plus d'accord avec le commentaire de @mayersdesign ci-dessus. ce schéma de couleurs doit être immédiatement rejeté.

— Scott

6

Tout d'abord, vous devez comprendre le but de votre jeu de couleurs. Dans un schéma de couleurs pour l'interface utilisateur, il est logique d'utiliser des couleurs neutres comme couleurs primaires, toutes les couleurs accentuées doivent être ajoutées avec parcimonie . Pensez à YouTube par exemple, quelle couleur vous vient à l'esprit? Rouge et noir, mais jetez un œil à la page Web YouTube, à 98% de blanc et de gris clair. Le rouge n'est utilisé que comme accent.

— Happy Hour Coding

Merci à tous (y compris les répondeurs)! J'ai juste revérifié SE pour voir ce que je pensais être 1 ou 2 commentaires depuis ce matin, et maintenant ça. J'ai beaucoup appris et reçu des arguments convaincants - merci!

— bers

1

1995 appelé. Ils veulent que leur palette de couleurs revienne.

— Mazura

54

Changez d'avis du client.

Rien ne peut résoudre le fait que le texte rouge sur fond bleu est un choix extrêmement mauvais pour la lisibilité car le contraste est trop faible et parce que le rouge et le bleu fonctionnent mal comme couleurs contrastées.

Ce site webaim.org montre que le contraste entre vos deux couleurs est pitoyable 1,52: 1

Le contraste est important pour la lisibilité

Le contraste du texte est l'un des aspects les plus importants de la lisibilité du texte. Heureusement pour nous, les Web Content Accessibility Guidelines (WCAG) 2.0 traitent spécifiquement du contraste du texte et fournissent des directives qui, bien que visant à fournir une accessibilité Web aux personnes handicapées, offrent également des conseils judicieux en général.

WCAG niveau AA nécessite un rapport de contraste d'au moins 4,5: 1 pour le texte normal et de 3: 1 pour le texte volumineux et le niveau AAA nécessite un rapport de contraste d'au moins 7: 1 pour le texte normal et de 4,5: 1 pour le texte volumineux.

Le site Web de vos clients est donc en contradiction directe avec les directives professionnelles publiées . C'est aussi en contradiction avec le goût esthétique (à mon avis professionnel)

Vous pouvez toujours utiliser des éléments rouges et bleus dans une conception si cela est nécessaire. Mais la pose d'un texte rouge de «taille de contenu» sur un fond bleu va simplement détourner un grand pourcentage des visiteurs de votre site. À mon avis, vous avez la responsabilité professionnelle de persuader votre client de ne pas l'utiliser.

J'espère que les liens fournis pourraient aider à rendre votre cas plus solide que de simplement dire que vous avez du mal à lire. Il est en effet démontrable difficile à lire.

Chromostéréopsie

Si ce n'est pas assez convaincant, essayez ceci - Chromostereopsis est (brièvement!) Une illusion d'optique qui cause des problèmes de profondeur de champ aux téléspectateurs. C'est désagréable!

— mayersdesign
source

11

Pour clarifier, les rapports de contraste dans le document W3C sont des minimums . Ne dites pas que le rapport doit être compris entre 4,5: 1 ou 7: 1; ils disent que cela devrait être au moins l' un d'entre eux, selon le niveau d'accessibilité que vous visez.

— Adrian McCarthy

1

Très bon point, j'ai mis à jour la réponse pour inclure plus de détails, en particulier celui-ci.

— mayersdesign

8

Bien que nullement parfait (ou même bon), l'ajout d'un contour blanc (ou autre) au texte peut aider à la lisibilité:

Cela peut être utile si votre client insiste pour conserver les couleurs.

— Diablotin
source

Pour être honnête, cela ne fonctionne qu'avec le type 36pt.

— user8356

Oui, super concept. Pas un sarcasme. Et plus vous l'appliquez, mieux nous pouvons lire le texte. Alors, prenez les contours blancs jusqu'au bord de l'écran ... Wink, wink.

— Martin Zaske

8

Tu ne peux pas. Ces nuances de rouge et de bleu sont à la fois des couleurs sombres et saturées, elles vibrent pratiquement les unes contre les autres, et ce texte fera saigner les yeux des gens. Tout développeur ou concepteur qui ne se soucie pas de la lisibilité du texte doit être expulsé de la ville sur un rail en rubis.

Essayez de rendre le rouge beaucoup plus léger. Il aura l'air rose mais il sera plus lisible. Ou utilisez du blanc ou du jaune pâle sur ce fond. Les fonds sombres sont notoirement difficiles à lire. Vous pouvez avoir la même couleur générale - un bleu verdâtre - mais la rendre beaucoup plus claire. Mais le texte rouge vif n'est jamais facile à lire non plus, je voudrais donc simplement supprimer ce schéma de couleurs pour le texte.

— user8356
source

7

Comme cela a été souligné, c'est un contraste de couleurs horrible . C'est aussi une mauvaise palette pour les personnes daltoniennes (avec une daltonie rouge-bleu, le rapport de contraste chute à quelque chose de sacrément proche de 1: 1, ce qui est complètement illisible).

Votre meilleur pari ici sera de convaincre le client qu'il ne doit pas mélanger du texte et des arrière-plans colorés. Colorez le texte ou l'arrière-plan, pas les deux. Essayez de charger une maquette dans un outil qui vous permet de simuler les perceptions des daltoniens (vous pouvez trouver quelques options décentes en ligne) et montrez le résultat à votre client, ce qui devrait considérablement aider à les convaincre.

Si ce n'est pas une option, d'autres choses que vous pouvez essayer d'améliorer la lisibilité incluent (notez qu'aucune de ces solutions ne résout le problème de daltonisme, elles ne font qu'aider le contraste ou la lisibilité générale:

Utilisez une police à interligne simple. Cela semble stupide, mais cela aide en fait la plupart des gens à lire le texte plus facilement. Évidemment, pas Courier New, mais Bitstream Vera Sans Mono (ou même quelque chose comme Droid Sans Mono) devrait toujours avoir l'air décent et sera un peu plus lisible.
Faites le poids de la police, et probablement la taille un peu aussi. Un texte plus gros et plus audacieux est plus facile à lire, indépendamment du contraste.
Échangez le jeu de couleurs (c'est-à-dire, faites-en du texte bleu foncé sur un fond rouge vif). Cela semble simple, mais il est généralement plus facile pour la plupart des gens de préparer le bleu foncé sur le rouge vif que l'inverse.
Ajoutez une ombre portée étroite à contraste élevé au texte avec un décalage. Ce que vous voulez ici n'est pas un fondu, c'est un bord dur qui offre un bon contraste. Le décalage de l'ombre peut également y contribuer, en particulier un simple décalage diagonal. J'irais également avec du noir ici au lieu du blanc (vous voulez accentuer le texte, pas l'arrière-plan, alors optez pour un contraste élevé par rapport au texte). Dans l'ensemble, quelque chose du genre text-shadow: 2px 2px 4px black;est probablement un bon point de départ.
Éclaircir considérablement le rouge. En ce moment, vous utilisez rgb(255,0,0). J'essaierais d'abord avec quelque chose comme rgb(255,204,204)(ou peut-être même plus léger), et j'ajusterais à partir de là.
Foncez le bleu. Quelque chose de plus proche rgb(25,51,77)est de la même teinte, mais devrait être suffisamment sombre pour rendre le texte plus lisible.

Une autre option qui aide également certains avec le problème de daltonisme:

Désaturez le fond bleu. Bien que ce ne soit pas la meilleure option (cela biaise quelque peu le jeu de couleurs), cela devrait aider la lisibilité au mieux de toutes les autres choses que j'ai énumérées, car cela augmentera activement le contraste. J'essaierais environ 30% de saturation en moins (c'est rgb(82,102,122)) comme point de départ.

— Austin Hemmelgarn
source

6

Si vous avez déjà essayé l'ombre de texte, je pense que la seule possibilité de conserver les mêmes couleurs est de créer une étendue de texte

<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>

modes

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;
}

1

Ou même un blanc uni dur est meilleur

— aloisdg dit Réintégrer Monica le

1

ceux-ci sont encore difficiles à lire pour moi ..

— Happy Hour Coding

@Dylan que pensez-vous de jsfiddle.net/bersbers/xdkj76L3

— bers

2

C'est lisible. Je ne pense pas que ce soit une bonne idée. Mais on peut le lire.

— Happy Hour Coding

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

— yunzen

5

Vous devez avoir un rapport de contraste suffisamment élevé entre l'arrière-plan et le texte (objet au premier plan) pour qu'il soit lisible, avec un rapport de contraste minimal de 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance montre que votre arrière-plan et votre premier plan sont trop rapprochés pour être lisibles.

Parfois, le client doit être informé que la palette de couleurs ne peut pas être entièrement préservée et doit être révisée afin de répondre aux exigences de lisibilité. Évidemment, inverser le texte en une couleur claire donnerait le contraste suffisant sur un fond sombre.

— Max Tokman
source

3

"Comment rendre le texte plus lisible?" Bref, non! La combinaison de couleurs ne respecte pas les directives d'accessibilité Web et ne doit pas être utilisée. Une couleur de premier plan ou d'arrière-plan différente doit être utilisée. Quel que soit votre public cible supposé, vous devez toujours viser à répondre aux besoins des personnes ayant une déficience visuelle, et c'est une solution facile.

Les rapports de contraste pour vos combinaisons de couleurs peuvent être consultés ici ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrew
source

2

(Pas assez de points pour commenter)

Vous pouvez essayer d'ajouter un trait au texte. J'utilise le terme «trait» dans le sens de Photoshop, essentiellement la couleur de la bordure / contour du texte pour servir de contraste. Le noir / blanc devrait être bien (surtout si vous jouez avec l'épaisseur du trait), mais j'imagine que certaines nuances de rouge / bleu pourraient aussi fonctionner.

— allthemikeysaretaken
source

Comment rendre cette combinaison de couleurs plus lisible?

Changez d'avis du client.