Comment calculer la meilleure couleur de type pour une couleur de fond aléatoire?

Je pourrais avoir besoin de présenter du contenu à plusieurs niveaux en fonction de la distance de l'observateur à un affichage. Disons que de loin, l'utilisateur perçoit une couleur plate, mais de loin, l'utilisateur doit être capable de lire du texte. La partie délicate est que la couleur d'arrière-plan plat est donnée / peut changer / je n'ai aucun contrôle sur.

Jusqu'à présent, j'ai élaboré un prototype vraiment basique pour déterminer la couleur du texte à partir de la couleur d'arrière-plan (cliquez pour choisir un arrière-plan aléatoire). C'est une approche très banale: je prends la teinte et la décale de 90 degrés (donc c'est assez différent) et j'inverse la luminosité dans l'espace colorimétrique HSB donc j'obtiens une couleur suffisamment différente pour être lisible / avoir un contraste décent avec l'arrière-plan .

Cela fonctionne parfois:

parfois non:

Cette approche est-elle bonne / dans le bon sens? Si oui, comment puis-je améliorer cela? Sinon, quelle direction dois-je suivre?

Malheureusement, je ne sais pas grand-chose sur la théorie des types et des couleurs, donc tous les conseils / astuces de personnes expérimentées sont très utiles. Ce sera affiché sur un écran, pas imprimé.

Quelles relations entre les couleurs d'arrière-plan et de premier plan que je recherche?

La lisibilité est une question de contraste. J'essaierais de déterminer à quel point chaque couleur d'arrière-plan est sombre en niveaux de gris, et si elle est supérieure à 50% de gris (plus sombre que la lumière), utilisez du texte blanc, en dessous de 50%, utilisez du texte noir. Cela garantira que vous avez au moins un contraste de 50% (différence de ton) pour rendre votre texte lisible.

Cette méthode est beaucoup plus facile que d'essayer de jouer avec des couleurs complémentaires ou inversées et garantit un contraste tonal maximum sur n'importe quelle couleur.

Voici ma réponse précédente à essentiellement la même question à Game Development Stack Exchange.

Pour résumer, comme le suggèrent les autres réponses ici, vous devez généralement utiliser du noir ou du blanc , selon celui qui contraste le mieux avec l'arrière-plan. (Bien sûr, si vous le souhaitez, donner à l'une ou l'autre couleur une légère teinte n'affectera pas beaucoup le contraste.)

Notez que, pour déterminer correctement à quel point une couleur sombre ou claire apparaît à l'utilisateur, il ne suffit pas simplement de faire la moyenne des valeurs de couleur RVB (ou de prendre la luminosité / valeur d'une couleur HSL / HSV). Vous devez plutôt prendre en compte (au moins) deux effets:

1. non-linéarité de l'appareil sur lequel la couleur est affichée , ce qui (pour les couleurs RVB sur les écrans d'ordinateur, au moins) a tendance à assombrir les tons moyens, et

2. la sensibilité spectrale de l'œil humain , qui, en gros, fait apparaître la couleur près du milieu du spectre visible (vert, jaune, cyan) par rapport à celle près des bords (bleu, rouge, violet).

Le premier problème peut être expliqué par l'expansion gamma , tandis que le second nécessite simplement une pondération non uniforme des canaux de couleur R / G / B. Ensemble, voici comment calculer approximativement la luminosité perçue d'une couleur RVB et décider si le noir ou le blanc contraste mieux avec elle:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Cela suppose que R, Get Bsont des nombres à virgule flottante compris entre 0,0 et 1,0. Si vous avez par exemple des entiers de 0 à 255, convertissez-les en flottants et divisez-les par 255.

Les constantes du code ci-dessus sont (approximativement) correctes pour l' entrée sRGB ; vous pouvez les ajuster si vous travaillez dans un autre espace colorimétrique, bien que les valeurs exactes n'aient pas vraiment d'importance: pour des couleurs suffisamment sombres ou claires, la réponse sera de toute façon la même, tandis que les couleurs tombant près de la limite contrasteront à peu près aussi bien avec du noir ou du blanc de toute façon.

Je suis d'accord avec John, gardez le texte autant que possible noir / blanc juste pour être sûr, vous pouvez également ajouter une petite quantité de saturation au texte et vous êtes en sécurité. Voici un petit test:

Voir à 100% ici: http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Téléchargez le fichier .ai (source) ici pour jouer: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai