Outline-farbe | CSS-Tricks

CSS-Almanach → Eigenschaften → O → outline-color

Mojtaba Seyedi am 11. Jul 2022

Die CSS-Eigenschaft outline-color legt die Farbe einer Umrandung (outline) eines Elements fest. Was ist eine Umrandung? Eine Umrandung ist eine Linie, die um Elemente gezeichnet wird – außerhalb des Randes –, die für Barrierefreiheit oder zu Dekorationszwecken verwendet wird, wenn sich das Element im Fokus befindet.

button {
  outline-color: #e435;
}

outline-color ist eine Bestandteileigenschaft der Kurzschreibweise outline und ist in der Spezifikation CSS Basic User Interface Module Level 4 definiert, die sich derzeit im Status Editor’s Draft befindet.

Verwendung

Normalerweise legen wir die Umrandung eines Elements mit der Kurzschreibweise fest

a:focus {
  outline: 0.1em solid darkgray;
}

Syntax

outline-color: <color>| invert

Anfangswert: invert (currentColor, falls invert nicht unterstützt wird)
Gilt für: alle Elemente
Vererbt: nein
Berechneter Wert: Für das Schlüsselwort invert ist der berechnete Wert invert. Für den Farbwert, wenn der Wert transluzent ist, ist der berechnete Wert der entsprechende rgba()-Wert. Ist er das nicht, ist es der entsprechende rgb()-Wert. Das Schlüsselwort transparent wird zu rgba(0,0,0,0).
Animationstyp: diskret

Werte

/* Keyword value */
outline-color: invert;

/* <color> values */
outline-color: #333;
outline-color: darkorange;
outline-color: hsl(210,100%,44%);

/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;

<color>: Definiert die Farbe der Umrandung und akzeptiert <rgb()>, <rgba()>, <hsl()>, <hsla()>, <hex-color>, <named-color>, currentcolor und <deprecated-system-color>
invert: Der Standardwert. Legt einen invertierten Wert der Hintergrundfarbe fest, auf der die Umrandung gerendert wird, und stellt daher sicher, dass die Umrandung sichtbar ist.
initial: Wendet die Standardeinstellung der Eigenschaft an, die invert ist.
inherit: Übernimmt den Wert von outline-color des Elternteils.
unset: Entfernt die aktuelle outline-color vom Element.

Laut Spezifikationen ist der Anfangswert der Eigenschaft outline-color das Schlüsselwort currentColor, falls der Browser den Wert invert nicht unterstützt. Zum Zeitpunkt des Schreibens gilt invert jedoch in allen modernen Browsern als ungültig. Sie können die Browserunterstützung unter caniuse überprüfen.

Beispiel

Das folgende Beispiel macht die Umrandung des Buttons rot, sobald er fokussiert ist

button {
  outline-width: 1px;
  outline-style: solid;
  outline-color: gray;
}

button:focus {
  outline-color: red;
}

Barrierefreiheit (Accessibility)

Eine Umrandung wird typischerweise verwendet, um den Fokus auf Elemente anzuzeigen, was aus Gründen der Barrierefreiheit bei Nicht-Maus-Interaktionen nützlich sein kann und allen Benutzern zugute kommen kann.

Es ist sehr wahrscheinlich, dass Sie die Umrandungsfarbe ändern möchten, um sie an Ihre Marke anzupassen oder sie auffälliger zu machen. Und hier kommt outline-color ins Spiel. Aber stellen Sie sicher, dass Ihre benutzerdefinierte Farbe den WCAG-Anforderungen entspricht, insbesondere Erfolgskriterium 2.4.7, das einen sichtbaren Fokusstatus detailliert beschreibt.

Wir müssen nicht nur sicherstellen, dass das Kontrastverhältnis zwischen der Umrandungsfarbe und dem Hintergrund hoch genug ist, um eine klare Sichtbarkeit zu gewährleisten, sondern auch in Fällen, in denen kein Abstand zwischen der Umrandung und dem Element besteht – dann müssen wir das Kontrastverhältnis zwischen der Umrandungsfarbe und dem Hintergrund des Elements selbst prüfen.

Nicht-Text-UI-Steuerelemente, wie z. B. Schaltflächen, müssen gemäß WCAG Erfolgskriterium 1.4.3 ein Farbkontrastverhältnis von mindestens 3:1 zu benachbarten Farben aufweisen.

Two blue buttons with white labels that say button. The button on the left has a dark blue outline while the button on the right has a black outline. The button on the left fails the 3.1 contrast ratio requirement with a 1.89.1 ration, while the right button passes with a 3.6.1 ratio. — Eine dunkelblaue Umrandungsfarbe, links, bietet im Vergleich zu einer schwarzen Umrandung einen unzureichenden Kontrast.

Sara Soueidan erklärt dies sehr gut in ihrem Artikel „A guide to designing accessible, WCAG-compliant focus indicators“. Sie können viel mehr über die WCAG-Kontrastverhältnisse und deren Ermittlung in Stacy Arellanos Deep-Dive-Artikel erfahren hier.