Werkzeug 08 · Palette und Kontrast in einem
Farbpalette und Kontrastprüfer
Die meisten Betriebe haben eine Farbe — vom Logo, vom Fahrzeug, vom Schild. Eine Website braucht acht. Hier wird aus Ihrer Farbe eine vollständige Palette, und jede Kombination wird gegen die Lesbarkeitsregeln geprüft, bevor sie irgendwo landet.
Ihre Firmenfarbe
Kennen Sie den Wert nicht? Öffnen Sie Ihr Logo in einem Bildbetrachter und benutzen Sie die Pipette — oder fragen Sie, wer das Logo gemacht hat, nach dem HEX-Wert.
Die Palette
Klicken Sie ein Feld an, um den Wert zu kopieren.
Rollen
So wirkt es
Rohrbruch? Wir sind in 60 Minuten bei Ihnen.
Notdienst rund um die Uhr, Festpreis vor Arbeitsbeginn. Seit 1998 im Kanton Zug — vier Monteure, ein Ansprechpartner.
Jetzt anrufen Offerte anfragenDieselben Farben, wie sie ein Besucher sieht — nicht als Quadrate, sondern als Text, den jemand lesen muss.
Lesbarkeit nach WCAG 2.2
Gemessen wird das Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe. Fliesstext braucht mindestens 4,5:1, grosse Schrift ab 24 px (oder 19 px fett) mindestens 3:1, und Bedienelemente — Knöpfe, Eingabefelder und deren Ränder — ebenfalls 3:1. Rein dekorative Trennlinien fallen nicht darunter und dürfen deshalb schwächer sein; sie werden hier bewusst nicht geprüft. Das ist kein Geschmacksurteil — es ist die Grenze, ab der ein Grossteil der über 60-Jährigen den Text nicht mehr sicher liest.
Fertige CSS-Variablen
Diese Zeilen gehören an den Anfang Ihres Stylesheets. Danach verwenden Sie überall
var(--marke) statt einer festen Farbe — dann ist ein Farbwechsel später
eine Zeile statt einer Suchaktion durch die ganze Seite.
Nächster Schritt
Farben sind der einfachste Teil
Eine Palette macht noch keine Website. Was sie braucht: eine Struktur, die zu Ihrem Betrieb passt, Texte, die Ihre Kundschaft versteht, und Technik, die auf dem Handy funktioniert. Für CHF 190 bauen wir Ihnen einen echten Vorentwurf Ihrer Startseite — bei Auftrag voll angerechnet.