Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit der CSS-Eigenschaft accent-color können wir auf die Akzentfarbe von Formular-Elementen wie Checkboxen oder Radio-Buttons zugreifen. Diese bestimmt die farbliche Gestaltung von voreingestellten oder unterschiedlichen Zuständen wie bspw. einer Auswahl. Bisher wird diese Gestaltung durch die Browser-Voreinstellungen vorgegeben.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Was verbessert der Einsatz von accent-color?

Abgesehen von einer unterschiedlichen Darstellung in unterschiedlichen Browsern fügen sich die Browser-Voreinstellungen oft nicht in das gewünschte Design. Die Gestaltung von Formularelementen ist bisher nur mit einigem Aufwand möglich: Die nativen Elemente werden vorzugsweise mittels CSS versteckt und an deren Stelle werden mit CSS erzeugte Elemente oder auch Grafiken eingefügt.

Wir können die Akzentfarbe setzen, jedoch behält der Browser die Entscheidung in Hinsicht auf weitere Darstellungsoptionen. Wenn der Kontrast nach den Kriterien des Browsers zu gering ausfällt, ändert er bspw. die Umrandungslinie eines Radio-Buttons oder den Hintergrund eines Range-Bereichs.

Beispiele für eingefärbte Formularelemente in verschiedenen Farben

Anwendung und Browser-Support

Der initiale Wert für die Eigenschaft ist auto. Gibt man eine Farbe an, ist die Notation in HTML-Farbnamen, Hex-, RGB- und HSL-Werten möglich.

.accented {
    accent-color: lime;
}

.accented {
    accent-color: #ff0000;
}
.accented {
    accent-color: rgb(249, 249, 10);
}
.accented {
    accent-color: hsl(21°, 86%, 65%);
}

Bisher unterstützt die CSS-Eigenschaft accent-color diese vier Elemente:

  • Checkboxen
  • Radio-Buttons
  • Range-Slider
  • Fortschrittsbalken

accent-color wird von Edge, Firefox, Chrome sowie den Android-Browsern unterstützt. Bei »Can I use« findet ihr den aktuellen Stand der Unterstützung.

Fazit

Es wäre sicherlich vorteilhaft, wenn mit dem Bearbeiten der Akzentfarbe über CSS auch andere input-Elemente oder Zustände angepasst werden könnten. Ansonsten kann ein einheitliches und vollständig umgesetztes Design von Formularen unverändert nur mit den erwähnten Aufwänden erreicht werden.

Geschrieben von Raimund Büchner

thumb

Raimund arbeitet als Medienberater und Web-Designer bei kulturbanause®. Neben der Kundenberatung und -betreuung liegt sein Schwerpunkt im Design der Dinge, die man nicht sieht: Struktur und Inhalte. Informationsarchitektur, UX-Design, Content Strategy sind dafür einige Schlagwörter, »Content Out« und »Mobile First« die Königswege, die für ihn oft den entscheidenden Unterschied zwischen »gut genug« und »so gut wie möglich« ausmachen.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →