Couleur d'arrière-plan adaptée au texte en noir et blanc
Dans ma page Web j'ai un fond texturé noir et au premier plan des textes de couleur bleu clair, blanc, gris, jaune sont présents. Les couleurs qui ne vont pas avec un fond de couleur noire ne sont pas visibles. Quelqu'un peut-il me suggérer une couleur d'arrière-plan qui va avec la couleur du texte de premier plan en noir et blanc?
Des textes de couleur bleu clair, blanc, gris, jaune de premier plan sont présents. Les couleurs qui ne vont pas avec un arrière-plan noir ne sont pas visibles.
Je retiendrai mon jugement jusqu'à ce que je vois une image ou un lien vers votre design, mais il semble que vous essayez déjà de mélanger de l'huile et de l'eau. Il n'y a probablement pas de couleur d'arrière-plan pour résoudre ce problème, alors abordons la question la plus intéressante ...
Vous demandez pour
une couleur d'arrière-plan qui va avec la couleur du texte de premier plan en noir et blanc.
L'orange droit (et de nombreuses autres teintes) peut retirer cela. Voir ce paletton , et imaginez-le avec une police plus lourde :
Le texte blanc et noir est lisible de façon acceptable (pour moi, au moins). Mais cette couleur comme arrière-plan pleine page serait écrasante. Voici la même palette un peu désaturée:
Je pense que cela ressemble à moche, mais le texte noir/blanc est encore assez lisible. Désaturons à presque gris:
Maintenant, c'est plutôt un gris chaud, et ça n'a pas l'air si mal. Mais nous commençons à nous heurter au problème mentionné par réponse ecc . Désaturons pleinement de voir ce que je veux dire:
Sans la saturation des couleurs, les textes blanc et noir sont trop similaires à l'arrière-plan, donc ils seront difficiles et/ou fatigants à lire.
OMI, la deuxième version (légèrement désaturée) n'est pas écrasante et le contraste du texte est acceptable. Dommage qu'il ressemble à du vomi de sauterelle.
Enfin, gardez à l'esprit que any des versions ci-dessus ressemblera très près de la version en niveaux de gris sous certains types de daltonisme (dyschromatopsie et achromatopsie). C'est l'une des raisons de ce principe:
Les couleurs d'arrière-plan et de texte doivent avoir un contraste élevé valeur, car teinte et saturation les contrastes dépendent trop de la perception individuelle et de la représentation du moniteur/de l'imprimante.
En utilisant du texte blanc (valeur == 255) et noir (valeur == 0), vous êtes limité à une valeur de contraste avec l'arrière-plan d'au plus 127 (le milieu de cette plage ). Par souci de lisibilité pour la plupart des utilisateurs de la plupart des appareils, , vous devez choisir soit du texte clair sur fond sombre, soit du texte sombre sur fond clair . Vous pouvez avoir du texte clair et du texte sombre sur la même page, assurez-vous simplement qu'ils ont des arrière-plans différents:
J'ai été dans cette position. Ça n'a jamais fière allure. Étant donné que, dans la conception, vous voulez généralement a) éviter d'utiliser un fond noir pur et b) éviter un faible contraste entre l'arrière-plan et le texte, une couleur située entre le blanc et le noir aura un contraste très faible. Si possible, essayez de repenser cette conception. C'est difficile à dire sans photos.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
WCAG Guidelines stipule que le texte lisible doit avoir un rapport de contraste de 4,5 ou plus. Il y a en fait des centaines de couleurs dans cette plage, et quelqu'un a compilé un liste utile d'entre elles (survolez chaque bloc pour saisir le code hexadécimal de la couleur).
Vous pourriez:
- changez la palette de couleurs de votre texte de premier plan pour ne pas avoir à la fois du noir et du blanc
- avoir un motif d'arrière-plan qui change de couleur avec goût derrière les différentes couleurs de texte de premier plan (vous devez vous assurer que le placement fonctionne avec différentes tailles d'écran et cela deviendrait probablement assez compliqué)
Aussi, suggérez-moi de vérifier cette réponse détaillée sur les schémas de couleurs et la lisibilité: Quel schéma de couleurs choisir pour les applications qui nécessitent de longues heures de travail?
Je suggère d'utiliser n'importe quelle couleur qui réussit le test de conformité WCAG. Il existe des règles concernant la combinaison des couleurs de premier plan et d'arrière-plan, la police et la taille qui passent la validation.
ContrastChecker.com est l'un des sites Web vous permettant d'exécuter un tel test.
La meilleure façon est d'utiliser du texte noir sur fond blanc. Évitez d'utiliser une couleur d'arrière-plan. FAITES une expérience par vous-même. Collez un article de 2000 mots sur fond blanc par rapport à une autre couleur et donnez-le à vos amis et à votre famille pour lire et observer leurs expressions.