Exploring color-contrast() for the First Time

Ich habe in den Release Notes für Safari Technology Preview 122 gesehen, dass es Unterstützung für eine color-contrast() Funktion in CSS gibt. Safari ist hier der Erste. Soweit ich weiß, unterstützt kein anderer Browser dies bisher, und ich habe keine Ahnung, wann Stable Safari es ausliefern wird oder ob irgendein anderer Browser es jemals tun wird. Aber! Es ist eine sehr gute Idee! Jedes native Werkzeug, das uns hilft, zugänglichere Schnittstellen zu liefern (wovon Farbkontrast ein Teil ist), ist für mich gut. Versuchen wir also, es zum Laufen zu bringen.

Jeder kann Safari Technical Preview herunterladen, also habe ich das getan.

Ich musste danach fragen, aber nur weil dies ein Vorab-Browser ist, heißt das nicht, dass all diese Funktionen standardmäßig aktiv sind. So wie Chrome Canary Feature-Flags hat, die man einschalten muss, hat auch Safari Technical Preview welche. Also musste ich es so aktivieren:

Die Release Notes enthalten keine Informationen darüber, wie color-contrast() tatsächlich verwendet wird, aber glücklicherweise findet die Websuche eine Spezifikation (sie ist Teil von Color Module 5), und MDN hat eine Seite dazu mit sehr grundlegenden Syntaxinformationen.

So verstehe ich es:

Das obige Beispiel ist ein wenig albern, weil es immer white zurückgibt – das hat den meisten Kontrast zu black. Diese Funktion wird eigentlich nützlich, wenn einer oder mehrere dieser Farbwerte *dynamisch* sind, was bedeutet, dass es sich höchstwahrscheinlich um eine CSS-Benutzerdefinierte Eigenschaft handelt.

Die Funktion gibt eine Farbe zurück, daher wird der wichtigste Anwendungsfall meiner Meinung nach das Festlegen einer Farbe basierend auf einem dynamischen Hintergrund sein. Also...

section {
  background: var(--bg);
  color: color-contrast(var(--bg) vs white, black);
}

Jetzt können wir jede beliebige Farbe an --bg übergeben und erhalten entweder weiße oder schwarze Textfarbe, je nachdem, was den meisten Kontrast hat.

Das ist extrem cool, selbst im grundlegendsten Anwendungsfall.

Hier ist eine Demo von Dave, bei der er nicht nur die Textfarbe im Elternelement festlegt, sondern auch die Farbe von Links, und die Links haben eine andere Auswahl an Farben. Spielen Sie mit den HSL-Schiebereglern (natürlich in Safari Technology Preview), um es in Aktion zu sehen.

Nur zwei Farben auszuwählen, die genug Kontrast haben, ist ziemlich einfach (obwohl Sie überrascht sein werden, wie oft es selbst von uns mit guten Absichten vermasselt wird). Aber oh wow, wie schnell es kompliziert wird bei verschiedenen Situationen, ganz zu schweigen von einer Menge Farbvarianten oder, Gott bewahre, beliebigen Kombinationen.

Hier ist ein Video, in dem ich mit Daves Tester spiele, damit Sie sehen können, wie sich die Farben an verschiedenen Stellen aktualisieren.