Farbpalette und Kontrast (hier auf der Seite)
kostenlos, ohne AnmeldungNamensnennung nicht nötig
Prüft, ob die Beschriftung auf Ihrer Schaltfläche genug Kontrast hat, und dunkelt eine Markenfarbe so weit ab, bis sie besteht.
Grafiken
Buttons und Trenner
Früher waren Buttons Bilddateien und Trennlinien animierte Grafiken. Beides macht man heute mit ein paar Zeilen CSS – aus guten Gründen.
Quellen
Lizenzangaben nach bestem Wissen zum 14. August 2026. Maßgeblich ist immer die Angabe auf der Quellseite selbst – Bedingungen ändern sich.
MDN Web Docs zu button
CC BY-SA 2.5Namensnennung erforderlich
Die maßgebliche Referenz zu Verhalten, Zuständen und Zugänglichkeit des button-Elements, auf Deutsch verfügbar.
Warum keine Bilder mehr
In der Frühzeit des Web war eine Schaltfläche eine Grafikdatei, weil sich mit HTML kaum etwas gestalten ließ. Jede Beschriftung brauchte ein eigenes Bild, jeder Hover-Zustand ein zweites, und wer den Text ändern wollte, musste das Grafikprogramm öffnen.
Heute ist eine Schaltfläche ein Element mit ein paar CSS-Regeln. Das ist nicht nur bequemer, es ist auch funktional besser: Der Text ist markierbar und durchsuchbar, er wird von Screenreadern vorgelesen, er passt sich an, wenn jemand die Schriftgröße hochstellt, und er kostet keine Ladezeit.
Was eine Schaltfläche braucht
Eine Trefferfläche von mindestens 44 mal 44 Pixel. Das ist die Größe, mit der ein Finger zuverlässig trifft. Der sichtbare Rahmen darf kleiner sein, die anklickbare Fläche nicht.
Vier unterscheidbare Zustände: normal, überfahren, fokussiert und gedrückt. Der Fokuszustand ist der, der am häufigsten fehlt – er ist für alle, die per Tastatur navigieren, die einzige Orientierung. Ihn per CSS zu entfernen, weil er stört, macht die Seite für diese Menschen unbedienbar.
Ausreichenden Kontrast: Der Text auf der Schaltfläche braucht 4,5 zu 1 gegenüber der Füllung, und die Fläche selbst 3 zu 1 gegenüber ihrer Umgebung, damit man sie überhaupt als Schaltfläche erkennt. Nachmessen lässt sich das im Kontrastprüfer.
Und das richtige Element: button für Aktionen auf derselben Seite, a für alles, was zu einer anderen Adresse führt. Ein div mit einem Klick-Ereignis ist weder das eine noch das andere und für Tastatur und Screenreader unsichtbar.
Trennlinien
Die animierten Trennlinien aus der GIF-Zeit sind ersatzlos verschwunden, und dafür gibt es einen einfachen Grund: Eine Trennlinie ist eine Linie. Ein hr-Element mit einer CSS-Regel erledigt das in einer Zeile, in jeder Breite, in jeder Farbe.
Der interessantere Gedanke ist ohnehin, ob es die Linie braucht. In vielen Layouts trennt Abstand besser als ein Strich. Wer zwischen jeden Abschnitt eine Linie setzt, zerhackt die Seite optisch, statt sie zu gliedern.
Was die einzelnen Lizenzkürzel bedeuten und wo es teuer wird, steht unter Bildlizenzen verstehen. Wenn das Material feststeht, geht es weiter mit Bilder für die Website optimieren.
Häufige Fragen
Wie groß muss eine Schaltfläche mindestens sein?
Die Trefferfläche sollte mindestens 44 mal 44 Pixel betragen. Das ist der Wert, mit dem ein Finger zuverlässig trifft. Der sichtbare Rand darf kleiner wirken, wenn die anklickbare Fläche über Innenabstand groß genug bleibt.
button oder a?
a für alles, was zu einer anderen Adresse führt – auch wenn es wie eine Schaltfläche aussieht. button für Aktionen auf derselben Seite: absenden, öffnen, umschalten. Der Unterschied ist für Tastaturbedienung und Screenreader wesentlich.
Darf ich den Fokusrahmen entfernen?
Nur, wenn Sie ihn durch etwas ebenso Sichtbares ersetzen. Wer per Tastatur navigiert, sieht sonst nicht, wo er sich befindet. Mit :focus-visible lässt sich der Rahmen nur bei Tastaturbedienung zeigen und beim Mausklick unterdrücken.
Weitere Kategorien
Hintergrundbilder
Quellen für großflächige Bilder, dazu die Frage, die vor der Bildauswahl kommt: Braucht die Seite überhaupt ein Hintergrundbild?
Icons
Symbolsätze mit klarer Lizenz, dazu die Frage, die vor der Auswahl steht: als SVG einbinden oder als Schriftart?
Schriften
Quellen für Schriften, die Sie auf einer geschäftlichen Website wirklich einsetzen dürfen – und die Stolperstellen bei deutschen Texten.
Animierte GIFs
Der Klassiker aus der Frühzeit des Web – und die ehrliche Einordnung, wo er heute noch am Platz ist und wo nicht.
Banner
Standardmaße, Dateigrenzen und die Frage, ob es überhaupt ein Bild sein muss.