Eine ganze Reihe von Orten, die Kontrast in einem einzigen Absatz betrachten können

Wenn wir darüber nachdenken, Farben im Design auszuwählen, denken wir immer über die Zugänglichkeit nach. Wenn die Farben berühren, gibt es Kontrast und wenn wir über den Farbkontrast von Text sprechen, muss es hoch genug sein, um lesbar zu sein. Dies kommt Menschen mit einer Vielzahl von visuellen Behinderungen zugute, aber auch jeder schätzt leicht lesbarer Text.

Schauen wir uns die Farbkontrastüberlegungen von nur einem einzigen Absatz an!

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

Fokussierbare Elemente wie Links müssen auch Fokusstile haben. Standardmäßig erhalten wir wahrscheinlich einen fuzzy blauen Umriss, daher müssen wir überprüfen, ob dies einen ausreichenden Farbkontrast hat. Und wenn wir es anpassen, erfordert diese Anpassung auch einen guten Farbkontrast.

Wir werden auch einen Schwebstatus für Mausbenutzer benötigen. Hier werde ich einen Hintergrundeffekt verwenden, der etwa die Hälfte des Textes abdeckt. Wenn Sie so etwas tun, muss der Effekt stark genug sein, um sich bei Schwebungen zu erkennen, und der Kontrast muss auf beiden Hintergründen funktionieren.

Es ist nicht ultra häufig, aber Sie können auch stylen: Besuchte Links. Das Styling ist etwas begrenzt (Sie können beispielsweise die Opazität oder den Hintergrund nicht ändern, da es sich um ein Sicherheitsanliegen handelt), aber Sie können die Farbe ändern. Wenn Sie das tun, benötigt es auch einen richtigen Kontrast. Vielleicht könnten wir die Farbdifferenzierung mit Farbe wegziehen: Erben; Um den Link etwas zu betonen, aber dennoch darauf hinweisen.

Eine andere Sache zu berücksichtigen ist, dass Menschen Text hervorheben. Auf meiner Maschine habe ich standardmäßig in orange Farbe eingerichtet (normalerweise ist es hellblau auf MacOS).

Hoffentlich halten die Link -Farben unter einer Highlight -Farbauswahl, die ein Benutzer möglicherweise haben könnte. Sie neigen dazu, sehr leichte Farbtöne zu sein.

Sie können die Farbe der Textauswahl auch über CSS steuern mit :: Selection {Hintergrund: lila; }. Wenn Sie das getan haben, müssen Sie alle Farben erneut überprüfen, um sicherzustellen, dass Sie ausreichend Kontrast erhalten.

Sie können versuchen, 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 einen Teil seines Kontrasts verloren hat. Wir könnten weiter in das Kaninchenloch gehen, indem wir neue Farben auf eine :: Auswahl und jedes andere Element einstellen, das seine eigenen Färben innerhalb des Textes hat.

Ich würde sagen, eine gute Faustregel ist, sehr leicht zu werden, wenn Sie eine benutzerdefinierte Hervorhebungsfarbe durchführen und dann keine weiteren Anpassungen speziell für den ausgewählten Text durchführen.

Die Idee für diesen Beitrag stammt aus einigen Fehlerberichten, die ich von Leuten erhalten habe, die berichtet, dass Links auf dieser Site schwer zu lesen sind, wenn sie Text hervorheben und dann einen Link konzentrieren. Ich habe versucht, es zu reparieren, indem ich aufwändiger wurde, aber es gibt Grenzen für das, was Sie tun können.

 :: Auswahl A: Fokus { / * nope * /}
A: Focus :: Selection { / * nope * /}
A :: Auswahl: Fokus { / * nope * /}

Es ist besser behandelt, wenn es weniger als mehr tut.

Ich habe kürzlich Ethan Müllers Design für Designsysteme Post gelesen und er macht einen ähnlichen Kontrast, aber über ein Farbspektrum und nicht über Kontexte hinweg. Zum Beispiel kann Ihre blaue Linkfarbe in einigen Ihrer Designsystemfarben gut funktionieren, aber nicht so sehr für andere.

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

• Der generische Rat von „Jedes Mal, wenn Sie eine Hintergrundfarbe deklarieren, können Sie eine Farbe deklarieren“.
• Ich habe Klassen auf Elternebene wie On-Light verwendet, um die Farben der Dinge in hellen Behältern breit zu verändern.
• Ich habe ein Sass -Mixin verwendet, um das Ändern von Links und den Linkzustand einfacher zu machen. Ich kann es bei der Änderung des Hintergrunds eher tun.

 @mixin linkStyletExt ($ linkColor) {
  A {
    // Generische Linkstile mit $ linkColor aktualisieren
    &:schweben,
    &: Fokus {
      // Ändern Sie auch die Schwebe-/Fokusstile, wahrscheinlich indem $ linkColor programmatisch verändert wird
    }
  }
}

.Variation {
   Hintergrund: $ SomeNewbgColor;
   linkstyletExt ($ SomeNewLinkColor)
}

Nun, danke, dass du mit mir auf diese Reise gekommen bist. Mir ist einfach der Fall, dass der Farbkontrast nicht ganz so einfach ist wie die Überprüfung einer einzigen Linkfarbe auf einem Hintergrund, um sicherzustellen, dass er passt. Möglicherweise gibt es ein Dutzend oder mehr Dinge zu überprüfen, je nachdem, wie viele Dinge Sie in Ihrer Körperkopie kopieren.

Die Schriftart in diesen Screenshots ist Ibarra Real Nova, die erst kürzlich bei Google Fonts veröffentlicht wurde.

Das obige ist der detaillierte Inhalt vonEine ganze Reihe von Orten, die Kontrast in einem einzigen Absatz betrachten können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!