Dynamische Text-Farbe, abhängig vom Hintergrund mit SASS.

Ein Beispiel:

Über CSS sollen Statusmeldungen oder Buttons auf Ihrer Website in vier unterschiedliche Layouts erstellt werden. Diese erhalten jeweils eine unterschiedliche Hintergrund-Farbe:

  • Success: #CBFC90 (Grün)
  • Info: #2EB9CC (Blau)
  • Warning: #FCFA90 (Gelb)
  • Danger: #CC532E (Rot)

Nun stellt sich nur noch die Frage nach der Text-Farbe innerhalb der Box: Hell oder Dunkel? Schwarz oder Weiß?

Mit Hilfe von SASS können Sie diese Entscheidung getrost der lightness()-Funktion überlassen. Diese berechnet über den RGB-Durchschnittswert die Helligkeit in einem Wert zwischen 0 – 100. Je höher die Zahl, desto heller die Farbe.

Um einen guten Kontrast zu gewährleisten wird dank einer kleinen Funktion in SASS der Text dunkel, wenn die Hintergrund-Farbe heller ist als 50%. Bei dunkleren Farben wie zum Beispiel Blau, wird der Text weiß gefärbt.

Die Hintergrund-Farben der Statusmeldungen oder Buttons können nun jeder Zeit angepasst werden. Ihre kleine und smarte Lösung kümmert sich um den Rest:

SASS

// FUNKTION ZUR BERECHNUNG DER TEXT-FARBE
@function setColorByBackground($backgroundColor) {
    @if (lightness($backgroundColor) > 50) {
      @return #000000;
    }
    @else {
      @return #FFFFFF;
    }
}

$success-color: #CBFC90;
$info-color: #2EB9CC;
$warning-color: #FCFA90;
$danger-color: #CC532E;

.infobox-success {
	padding: 20px;
	margin: 20px;
	font-size: 1em;
	background: $success-color;
	color: setColorByBackground($success-color);
}
.infobox-info {
	@extend .infobox-success;
	background: $info-color;
	color: setColorByBackground($info-color);
}
.infobox-warning {
	@extend .infobox-success;
	background: $warning-color;
	color: setColorByBackground($warning-color);
}
.infobox-danger {
	@extend .infobox-success;
	background: $danger-color;
	color: setColorByBackground($danger-color);
}

HTML

<div class="infobox-success">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-warning">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-danger">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.