Kontrastreich

Henning über Sass

Manchmal muss Text dynamisch auf einem beliebig farbigen Hintergrund ausgegeben werden. In solchen Momenten ist es eine echte Hilfe, wenn man sich keine Gedanken mehr über den Kontrast zwischen Hintergrund und Text machen muss, sondern das automatisch vorgenommen wird. Ich möchte hier anhand des CSS-Preprocessors Sass einmal exemplarisch aufzeigen, wie man sich mit einer kleinen Sass-Funktion einiges an Arbeit und Zeit sparen kann.

…so sieht’s aus bzw. dasselbe in grün auf jsFiddle

Farbkontraste mit Sass ermitteln

Unsere Leinwand

Gehen wir von folgenden HTML-Elementen aus, die uns als Leinwand fungieren sollen:


<ul class="colorsteps">
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<li>Contrasting Text</li>
<ul>

Eine einfache Liste mit der CSS-Klasse „colorsteps“ und 10 Listenelementen, die ebenfalls durch eine Sass-Funktion in einen Farbgradienten verwandelt werden.

Zum Generieren der Farbabstufungen lassen wir eine @while-Schleife laufen, die automatisch CSS-Klassen der Form .colorsteps li:nth-child(x) generiert.


$step-color: #ccff90 ; /* ein frisches Grün */
$step: 0; /* ...und der initiale Wert unseres Iterators */

@while $step <= 10 { .colorsteps li:nth-child(#{$step}) { $bgcolor: darken($step-color, ($step * 6%)); background-color: $bgcolor; } $step: $step + 1; }

Sass ermöglicht es Funktionen zu deklarieren, die es uns erlauben z.B. Werte zu errechnen. In diesem Fall möchten wir den Helligkeitswert der Hintergrundfarbe bestimmen. Die Helligkeit eines Farbwertes lässt sich über die Sass-Funktion lightness() berechnen, die einen Wert zwischen 0 und 100 zurückgibt. 0 ist der dunkelste und 100 der hellste Wert. Über ein @if-Statement vergleichen wir, ob der Helligkeitswert einer Farbe größer als 50 ist - also eine helle Farbe- und geben dementsprechend Schwarz zurück, um einen guten Kontrast zu gewährleisten.


@function detect-contrasting-text-color($color) {
@if (lightness($color) > 50) {
@return #000;
}
@else {
@return #fff;
}
}

Jetzt muss die Funktion nur noch in der entsprechenden css-Klasse aufegrufen werden.


@while $step <= 10 { .colorsteps li:nth-child(#{$step}) { $bgcolor: darken($step-color, ($step * 6%)); background-color: $bgcolor; color: detect-contrasting-text-color($bgcolor); } $step: $step + 1; }

Ein Beispiel gibt's auf jsFiddle

HTH,
--me

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries