calculer automatiquement le contraste
Un utilisateur peut modifier la conception par défaut de son site en sélectionnant une couleur. Cette couleur est appliquée à la couleur d'arrière-plan du menu. Le problème est que je dois changer la couleur du texte du menu en fonction de la couleur sélectionnée (par exemple, si l'utilisateur choisit le vert foncé, la couleur du texte doit être blanche).
Je veux seulement utiliser le blanc ou le noir comme couleur de texte pour le menu et je veux savoir comment calculer si le blanc ou le noir donne la meilleure lisibilité.
Mise à jour
Le site Web est destiné aux équipes de football. Étant donné que les équipes de football ont souvent des couleurs spécifiques, je veux leur donner la possibilité d'ajouter des couleurs d'équipe au site. les modèles ne feront pas l'affaire car je ne peux pas fournir toutes les couleurs avec les modèles. J'ai également choisi de ne pas leur donner la possibilité de définir la couleur du texte car je pense que c'est un problème de physique (contraste)
Le W3C a explicite directives pour l'accessibilité du contenu Web , y compris le contraste. Vous pouvez comparer les valeurs des couleurs à leur rapport et indiquer à l'utilisateur si leurs choix de couleurs sont probablement inaccessibles/illisibles.
La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1
Notez qu'il y a des exceptions et quelques bonnes indications dans l'ensemble complet des directives. Si vous faites quelque chose d'aussi simple que de vérifier si le blanc ou le noir est le plus lisible, comparer le rapport de contraste est le moyen le plus simple . Notez que cela ne donne pas toujours des couleurs idéales si le noir et le blanc sont les seules options de texte. La lisibilité est plus complexe que le simple contraste, c'est pourquoi les directives du W3C vont dans des choses comme la taille de la police et d'autres considérations.
Voici un excellent outil pour vous permettre de tester le contraste dans le texte . Vous pouvez avoir une bonne idée de ce qui est vérifié pour l'accessibilité des couleurs et envisager de donner à vos utilisateurs un affichage un peu comme ça; présenter le texte sur l'arrière-plan choisi et envisager de leur donner un message d'avertissement si leur texte est considérablement inférieur au seuil de lisibilité .
La solution simple est de simplement regarder la valeur numérique de la couleur et de décider d'un seuil au-dessus duquel elle sera noire et en dessous de laquelle elle sera blanche.
Par exemple (avec tous les nombres donnés en hexadécimal ):
Si la couleur du bouton est # 4E5523, ajoutez chaque composant de couleur pour obtenir une valeur globale. Dans ce cas, ce serait # 4E + # 55 + # 23 = # C6. Si le seuil était fixé à mi-chemin entre le noir pur ( # 000000) et le blanc ( # FFFFFF), ce serait à # 17E. # C6 est inférieur, utilisez donc du blanc.
Si la couleur du bouton est # 70CCD1, la valeur de chaque composant de couleur ajouté serait # 20D, ce qui est supérieur au seuil de # 17E , vous devez donc utiliser du noir.
C'est une méthode très simple, mais elle fonctionne.
Je ne pense pas que vous puissiez.
Chaque ordinateur, chaque écran d'ordinateur et chaque utilisateur a sa propre interprétation de la couleur. Ainsi, une certaine combinaison de couleurs d'arrière-plan et de premier plan peut sembler agréable sur un écran et terrible sur un autre écran. Ou cela peut sembler agréable pour une personne mais terrible pour un autre utilisateur.
Si vous autorisez l'utilisateur à choisir librement n'importe quelle couleur, certains utilisateurs se retrouveront avec une combinaison arrière-plan au premier plan qui leur fatiguera les yeux sans que l'utilisateur ne le sache, car certains s'en moquent.
D'un point de vue UX, ne serait-il pas préférable de permettre à l'utilisateur de choisir entre une sélection prédéfinie de "thèmes" (c'est-à-dire une combinaison arrière-plan)? Vous pouvez vous assurer que ces thèmes sont conçus dans un souci de lisibilité.
J'ai récemment construit un outil qui vérifie automatiquement le contraste des liens et des boutons des sites Web .
Il y a des choses utiles qui, je pense, sont différentes et très utiles:
- Il calcule le contraste non textuel (le contraste de l'arrière-plan du bouton avec les couleurs adjacentes) -> minimum 3: 1
- Il prend également en compte les états de vol stationnaire et de mise au point.
J'aime une solution avec de bons thèmes prédéfinis. L'utilisateur peut sélectionner un thème approprié d'un ou plusieurs thèmes clairs et sombres. La question générale est de savoir à quel point la personnalisation flexible des couleurs est importante.
La technique de changement de couleur d'arrière-plan réglable en continu est mise en œuvre, par ex. dans Adobe Aftereffects. La couleur du texte passe automatiquement à la meilleure couleur de contraste (noir ou blanc). IMO un bon thème sombre et clair serait assez bon.