Dans quelle mesure un texte secondaire doit-il être opaque?
Il y a un débat entre l'UI et le personnel de l'UX sur "Dans quelle mesure un texte secondaire doit-il être opaque?"
Voici l'exemple d'interface utilisateur:
Le design se veut minimaliste. Nous utilisons uniquement du noir et du blanc, pas de couleurs du tout. Et il y a un petit texte: "Seulement> 10 $ de commandes".
Le personnel UX veut le rendre opaque à 80% (voir dernier élément) car il est important que l'utilisateur final en soit conscient. Le personnel de l'interface utilisateur veut le rendre opaque à 15% (voir le premier élément), sinon ils sentent que le design minimaliste est cassé.
D'un point de vue objectif UI/UX. Dans quelle mesure les textes secondaires doivent-ils être opaques?
Si vous souhaitez que votre site soit accessible, utilisez un calculateur de contraste pour vous assurer que votre site répond aux exigences des WCAG.
Si vous ne souhaitez pas que votre site soit accessible, utilisez une opacité de 15% sur fond blanc ...
Désolé si c'est court, mais une opacité de 15% est tout à fait trop légère pour les personnes ayant des déficiences visuelles même modérées. De plus, si quelqu'un, même avec une vision parfaite, essaie de visualiser votre site dans un environnement moins qu'optimal (lumière directe du soleil, moniteur sombre ou endommagé, écran de téléphone fissuré, etc.), alors il sera presque impossible à lire. Je comprends vouloir un design minimaliste, mais vous ne devriez pas créer une situation où un pourcentage important de vos utilisateurs aura de grandes difficultés à l'utiliser.
La nature secondaire du texte est communiquée par sa taille relative, pas par sa couleur, et vous devez concevoir le texte pour la lisibilité, pas pour la façon dont il "se sent" comme il correspond à une certaine esthétique.
Le texte en question a déjà un statut secondaire, communiqué par sa position dans la hiérarchie typographique, donc concrètement, vous pouvez vous permettre d'avoir le texte à 100% d'opacité.
Si vous souhaitez éclaircir le texte, utilisez un vérificateur d'accessibilité de contraste de texte et éclaircissez jusqu'à ce qu'il échoue. N'allez pas plus léger. Mettre la fonction avant le formulaire
Utilisez un outil comme https://webaim.org/resources/contrastchecker/ pour trouver la version la plus claire de la couleur de votre texte qui passe pour une lisibilité de base. Si votre couleur de départ est # 000000, ne devenez pas plus sombre que # 5C5C5C