Zum Inhalt springen
LMMeier Werkzeuge

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 anfragen

Dieselben 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.