Kurz gesagt: Die Farben deiner Website stellst du einmal zentral ein. Sie gelten auf allen Seiten, du musst keine Sektion einzeln einfärben. Für Praxen bewährt: eine ruhige, warme Grundfarbe, eine deutlich dunklere Zweitfarbe und eine Akzentfarbe nur für Handlungen wie „Termin buchen“ oder „Anrufen“. Texte müssen sich klar vom Hintergrund abheben.
Wo im System: Webseiten (CMS) → Seiten → Websitedaten bearbeiten (pinkfarbener Link oben) → Globale Variablen → Reiter Design / Style
Auf einen Blick
Farben eintragen
Websitedaten bearbeiten > Design / Style > Deine Farben
HEX-Codes eintragen, die Schriftfarbe daneben auf Automatisch lassen.
Bereiche einfärben
Design / Style > Bereiche einfärben
Festlegen, wo die Farben erscheinen. Oft reichen schon die Grundfarben.
Speichern und prüfen
Websitedaten speichern
Ist der Termin-Button sofort zu erkennen? Sind alle Texte gut lesbar?
Schritt für Schritt
- Öffne Webseiten (CMS) → Seiten und klicke oben auf Websitedaten bearbeiten.
- Wechsle in den Reiter Design / Style.
- Trag deine Farben als HEX-Code ein, zum Beispiel
#87A092für ein ruhiges Salbeigrün. Die Codes stehen meist im Logo-Styleguide oder du fragst deine Grafikerin danach. - Lass die Schriftfarbe neben jeder Farbe, zum Beispiel Hauptfarbe - Schrift, auf Automatisch. Dann berechnet das System selbst, ob helle oder dunkle Schrift auf dieser Farbe besser lesbar ist.
- Klicke auf Websitedaten speichern.
- Schau dir deine Website am Computer und am Handy an: Ist der Termin-Button auf jeder Seite sofort zu erkennen? Sind alle Texte gut lesbar?
Diese Farben kannst du einstellen
| Feld | Was du einträgst | Warum das wichtig ist |
|---|---|---|
| Hauptfarbe | Eine ruhige Farbe aus deinem Logo oder deinen Praxisräumen, zum Beispiel Salbei, Sand oder ein gedecktes Petrol | Sie prägt den Gesamteindruck, etwa bei Flächen und hervorgehobenen Elementen. |
| Schmuckfarbe | Eine deutlich dunklere, kräftigere Farbe, zum Beispiel Espresso oder Petrolblau | Setzt Akzente. Zwei fast gleiche Pastelltöne wirken blass, die zweite Farbe ist dann kaum zu sehen. |
| Weißton und Schwarzton | Ein warmes Off-White statt reinem Weiß, ein Anthrazit statt Tiefschwarz | Wirkt ruhiger und freundlicher als reines Weiß mit Schwarz. |
| Neutralton | Ein zurückhaltender, heller Ton | Für ruhige Hintergrundflächen, auf denen deine Inhalte gut wirken. |
| Zusatzfarben 1–5 | Nur bei Bedarf, zum Beispiel eine eigene Farbe für Termin-Buttons | Eine Akzentfarbe nur für Handlungen sorgt dafür, dass der Weg zum Termin überall sofort erkennbar ist. |
| … - Schrift (neben jeder Farbe, z. B. Hauptfarbe - Schrift) | Automatisch lassen | Das System wählt per Kontrastberechnung helle oder dunkle Schrift. |
Bereiche einfärben
Weiter unten im selben Reiter legst du im Abschnitt Bereiche einfärben fest, wo deine Farben erscheinen: Hintergrund der ganzen Seite, Hintergrund einzelner Sektionen, Hintergrund der Kacheln sowie Kopfzeile, Seiten-Navigation und Footer. Farbige Sektionshintergründe lassen sich auch ganz ausschalten, wenn du einen durchgehenden Hintergrund möchtest.
- Stell zuerst die Grundfarben ein und schau dir das Ergebnis an. Fein justierst du erst danach, oft reichen die Grundfarben schon.
- Wähl für den Seitenhintergrund ein warmes Off-White statt Grau.
- Wechsle Farbflächen mit hellen Sektionen ab. Mehr als zwei farbige Sektionen direkt hintereinander wirken unruhig.
Banner und Text auf Bildern
- Banner - Farbe und Banner - Transparenz: Damit stellst du ein, in welcher Farbe Überschriften im Banner erscheinen und wie durchscheinend die Textboxen auf dem Bild sind.
- Layer und Layer - Transparenz: eine Überlagerung über Bildern, damit Text darauf lesbar bleibt. Je niedriger der Wert, desto dunkler. Steht Text auf einem Foto, gehört eine ausreichende Abdunklung dazu.
- Banner - Animation und Banner - Geschwindigkeit (in ms): gilt für Banner mit mehreren Bildern (5000 Millisekunden sind 5 Sekunden pro Bild). Für Praxen empfehlen wir ein einzelnes Bild im Banner statt eines laufenden Sliders: Banner bearbeiten: Bild, Video, Termin-Box
Gut zu wissen
- Kontrast: Normaler Text braucht mindestens ein Kontrastverhältnis von 4,5 : 1 zum Hintergrund, große Schrift mindestens 3 : 1. Helle Pastelltöne als Schriftfarbe fallen fast immer durch. Prüfen kannst du deine Farbpaare kostenlos mit dem WebAIM Contrast Checker.
Quelle: W3C, WCAG 2.1, Kontrast (Minimum) - Keine Krankenhaus-Kälte: Reines Weiß mit grellem Blau oder Grün wirkt klinisch. Schrille Signalfarben lenken ab. Rot nur für echte Warnungen, zum Beispiel einen Notfallhinweis.
- Nie nur über Farbe: Was wichtig ist, steht immer auch als Text da. Ein grüner Punkt allein sagt niemandem, ob ihr neue Patienten aufnehmt: Aufnahme-Status für neue Patienten anzeigen
- Hell oder dunkel: Ein Umschalter zwischen hellem und dunklem Modus auf der Website ist eine Vorführfunktion und gehört bei deiner Praxis ausgeschaltet: Design-Variante wählen
- Design-Variante wechseln? Deine Farben bleiben dabei erhalten.