Tout un tas d'endroits pour considérer le contraste dans un seul paragraphe

Lorsque nous pensons à choisir des couleurs dans le design, nous pensons toujours à l'accessibilité. Chaque fois que les couleurs se touchent, il y a du contraste et, si nous parlons du contraste des couleurs du texte, il doit être suffisamment élevé pour être lisible. Cela profite aux gens avec une variété de handicaps visuels, mais aussi tout le monde apprécie le texte facilement lisible.

Regardons les considérations de contraste de couleur d'un seul paragraphe!

Un lien dans un paragraphe est probablement défini dans une autre couleur pour le distinguer comme un lien.

Les éléments focalisés, comme les liens, doivent également avoir des styles de mise au point. Par défaut, nous aurons probablement un contour bleu flou, nous devrons donc vérifier que cela a un contraste de couleur suffisant. Et si nous le personnalisons, cette personnalisation aura également besoin d'un bon contraste de couleur.

Nous aurons également besoin d'un état de survol des utilisateurs de la souris. Ici, je vais utiliser un effet de fond qui couvre environ la moitié du texte. Lorsque vous faites quelque chose comme ça, l'effet doit être suffisamment fort pour être perceptible sur le plan de volants, et le contraste doit fonctionner sur les deux horizons.

Ce n'est pas ultra commun, mais vous pouvez également coiffer: les liens visités. Le style est quelque peu limité (vous ne pouvez pas modifier l'opacité ou l'arrière-plan, par exemple, car c'est un problème de sécurité), mais vous pouvez changer la couleur. Si vous faites cela, il a également besoin d'un contraste approprié. Peut-être pourrions-nous tirer la différenciation des couleurs avec la couleur: hériter; pour un peu souligner le lien mais l'indique toujours.

Une autre chose à considérer est les gens qui mettent en évidence le texte. Sur ma machine, je l'ai configurée pour mettre en surbrillance dans une couleur orange par défaut (c'est normalement un bleu clair sur macOS).

Espérons que les couleurs de lien tiennent sous n'importe quel choix de couleur de surbrillance qu'un utilisateur pourrait avoir. Ils ont tendance à être des nuances très légères.

Vous pouvez également contrôler la couleur de sélection du texte via CSS avec :: SELECTION {Background: Purple; }. Si vous avez fait cela, vous devez à nouveau vérifier toutes vos couleurs pour vous assurer que vous avez un contraste suffisant.

Vous pouvez essayer de prendre des mesures en main en changeant à la fois la couleur et le fond.

Mais notez que le lien à l'intérieur du texte a perdu une partie de son contraste ici. Nous pourrions continuer à descendre le terrier du lapin en fixant de nouvelles couleurs sur une sélection :: et tous les autres éléments qui ont ses propres colorations dans le texte.

Je dirais qu'une bonne règle de base est de devenir très légère si vous allez faire une couleur de mise en évidence personnalisée et ensuite ne faire plus de personnalisations spécifiquement pour le texte sélectionné.

L'idée de cet article est venue de certains rapports de bogues que j'ai obtenus de personnes signalant que les liens sont difficiles à lire sur ce site lors de la mise en évidence du texte, puis de la mise en œuvre d'un lien. J'ai essayé de le réparer en devenant plus élaboré, mais il y a des limites à ce que vous pouvez faire.

 :: Sélection A: Focus {/ * non * /}
a: focus :: sélection {/ * non * /}
A :: Sélection: Focus {/ * non * /}

Il est mieux géré en faisant moins que plus.

J'ai récemment lu la conception d'Ethan Muller pour les systèmes de conception Post et il fait un point similaire sur le contraste, mais à travers un spectre de couleurs plutôt que dans les contextes. Par exemple, votre couleur de lien bleu peut fonctionner très bien sur quelques-unes de vos couleurs de système de conception, mais pas tant pour les autres.

Il y a quelques choses qui pourraient aider à cela.

• Les conseils génériques de «chaque fois que vous déclarez une couleur d'arrière-plan, déclarez une couleur» pourrait aider.
• J'ai utilisé des cours de niveau parent comme la lumière pour changer les couleurs des choses à l'intérieur des conteneurs de couleur claire.
• J'ai utilisé un mixin SASS pour faciliter la modification des liens et les états des liens, donc je suis plus susceptible de le faire lors du changement des arrière-plans.

 @Mixin linkstyleText ($ linkColor) {
  un {
    // Mette à jour les styles de liens génériques avec $ linkcolor
    &:flotter,
    &:se concentrer {
      // modifie également les styles de survol / focus, probablement en modifiant $ linkcolor programatiquement
    }
  }
}

.Variation {
   Contexte: $ Somenewbgcolor;
   linkstyleText ($ SomenewLinkColor)
}

Eh bien, merci d'être venu dans ce voyage avec moi. Il m'est venu à l'esprit que le contraste des couleurs n'est pas aussi simple que de vérifier une seule couleur de lien sur l'arrière-plan pour s'assurer qu'elle passe. Il pourrait y avoir une douzaine ou plus de choses à vérifier en fonction du nombre de choses que vous colorez dans votre copie corporelle.

La police de ces captures d'écran est Ibarra Real Nova, qui a été récemment publiée sur Google Fonts.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!