Eine ganze Menge Orte, um Kontrast in einem einzigen Absatz zu berücksichtigen 

Wenn wir über die Farbauswahl im Design nachdenken, denken wir immer an Barrierefreiheit. Wo immer Farben aufeinandertreffen, gibt es Kontrast, und wenn wir über den Farbkontrast von Text sprechen, muss dieser hoch genug sein, um lesbar zu sein. Dies kommt Menschen mit einer Vielzahl von Sehstörungen zugute, aber jeder schätzt auch gut lesbaren Text.

Betrachten wir die Farbkontrastüberlegungen für nur einen einzigen Absatz!

Ein Link in einem Absatz wird wahrscheinlich in einer anderen Farbe gesetzt, um ihn als Link zu kennzeichnen.

Fokussierbare Elemente, wie Links, benötigen auch Fokusstile. Standardmäßig erhalten wir wahrscheinlich eine unscharfe blaue Umrandung, daher müssen wir prüfen, ob diese einen ausreichenden Farbkontrast aufweist. Und wenn wir sie anpassen, muss diese Anpassung ebenfalls einen guten Farbkontrast aufweisen.

Wir benötigen auch einen Hover-Zustand für Mausbenutzer. Hier verwende ich einen Hintergrundeffekt, der etwa die Hälfte des Textes abdeckt. Wenn Sie so etwas tun, muss der Effekt stark genug sein, um beim Überfahren mit der Maus bemerkbar zu sein, und der Kontrast muss auf beiden Hintergründen funktionieren.

Es ist nicht sehr verbreitet, aber Sie können auch :visited Links stylen. Das Styling ist etwas eingeschränkt (Sie können z. B. opacity oder background nicht ändern, da dies ein Sicherheitsrisiko darstellt), aber Sie können die Farbe ändern. Wenn Sie das tun, benötigt es auch den richtigen Kontrast. Vielleicht könnten wir die Farbdifferenzierung mit color: inherit; aufheben, um den Link etwas zu de-emphasieren, aber ihn trotzdem anzuzeigen.

Eine weitere Überlegung ist das Hervorheben von Text durch Personen. Auf meinem Computer habe ich es so eingerichtet, dass es standardmäßig in Orange hervorgehoben wird (auf macOS ist es normalerweise ein helles Blau).

Hoffentlich halten die Linkfarben jedem Hervorhebungsfarbwahl stand, die ein Benutzer möglicherweise hat. Sie sind tendenziell sehr helle Farbtöne.

Sie können die Textauswahlfarbe per CSS steuern, ebenfalls mit ::selection { background: purple; }. Wenn Sie dies getan haben, müssen Sie alle Ihre Farben erneut überprüfen, um sicherzustellen, dass Sie einen ausreichenden Kontrast erhalten haben.

Sie können versuchen, die Maßnahmen selbst in die Hand zu nehmen, indem Sie sowohl Farbe als auch Hintergrund ändern.

Beachten Sie jedoch, dass der Link im Text hier etwas an Kontrast verloren hat. Wir könnten uns weiter in das Kaninchenloch vertiefen, indem wir neue Farben für a::selection und jedes andere Element festlegen, das seine eigenen Farbgebungen innerhalb des Textes hat.

Ich würde sagen, eine gute Faustregel ist, *sehr hell* zu gehen, wenn Sie eine benutzerdefinierte Hervorhebungsfarbe verwenden möchten, und dann keine weiteren Anpassungen speziell für den ausgewählten Text vorzunehmen.

---

Die Idee für diesen Beitrag stammt von einigen Fehlerberichten, die ich von Personen erhalten habe, die berichteten, dass Links auf dieser Seite beim Hervorheben von Text und anschließenden Fokussieren eines Links schwer zu lesen sind. Ich habe versucht, es aufwendiger zu beheben, aber es gibt Grenzen dessen, was Sie tun können.

::selection a:focus { /* nope */ }
a:focus::selection  { /* nope */ }
a::selection:focus  { /* nope */ }

Es wird besser gehandhabt, indem man weniger als mehr tut.

---

Ich habe kürzlich Ethan Mullers Beitrag Designing for Design Systems gelesen, und er macht einen ähnlichen Punkt über Kontrast, aber über ein Farbspektrum statt über Kontexte. Zum Beispiel mag Ihre blaue Linkfarbe auf einigen Ihrer Designsystemfarben gut funktionieren, auf anderen jedoch nicht so gut.

Es gibt ein paar Dinge, die dabei helfen könnten.

• Der allgemeine Ratschlag "jedes Mal, wenn Sie eine Hintergrundfarbe deklarieren, deklarieren Sie auch eine Farbe" könnte helfen.
• Ich habe übergeordnete Klassen wie on-light verwendet, um Farben von Dingen in hellfarbigen Containern generell zu ändern.
• Ich habe einen Sass-Mixin verwendet, um das Ändern von Links und Linkzuständen zu erleichtern, sodass ich eher dazu neige, dies beim Ändern von Hintergründen zu tun.

@mixin linkStyleText($linkColor) {
  a {
    // Update generic link styles with $linkColor
    &:hover,
    &:focus {
      // Also change the hover/focus styles, probably by altering $linkColor programatically
    }
  }
}

.variation {
   background: $someNewBGColor;
   linkStyleText($someNewLinkColor)
}

---

Nun, danke, dass Sie mich auf diese Reise mitgenommen haben. Mir ist gerade bewusst geworden, dass Farbkontrast nicht so einfach ist wie das Überprüfen einer einzelnen Linkfarbe auf einem Hintergrund, um sicherzustellen, dass sie die Anforderungen erfüllt. Es könnten ein Dutzend oder mehr Dinge zu überprüfen sein, je nachdem, wie viele Elemente Sie in Ihrem Fließtext farblich gestalten.

Die Schriftart in diesen Screenshots ist Ibarra Real Nova, die gerade erst auf Google Fonts veröffentlicht wurde.