Ändere --neutral-900 für alle Grautoene, --brand-500 für die Markenflächen und --koi-500 für die Akzentfarbe. Alles andere rechnet sich daraus.
Die vier Stellschrauben
| Variable | Steuert |
|---|---|
--neutral-900 |
alle Grau- und Texttöne (9 Stufen) |
--brand-500 |
Markenflächen und Hintergründe |
--koi-500 |
Akzentfarbe — Links, Rahmen bei Interaktion |
--amber-500 u. a. |
Statusfarben (Hinweis, Fehler, Erfolg) |
Wo du das änderst
In Elementor unter Site Settings → Global Variables. Dort stehen die Grundwerte als einzelne Farbfelder.
Änderst du --neutral-900, passen sich automatisch an: Haupttext, Nebentext, dezenter Text, Rahmen, Trennlinien, Hintergrundflächen. In einem Schritt, ohne eine Seite anzufassen.
Warum nicht die Zwischenstufen
--neutral-500 ist berechnet: 50 % von --neutral-900, gemischt mit Weiß. Schreibst du dort einen eigenen Hex-Wert hinein, ist die Stufe von der Grundfarbe abgekoppelt — beim nächsten Ändern der Grundfarbe bleibt sie stehen und passt nicht mehr.
Dasselbe gilt für die Rollen-Variablen (--text-primary, --bg-muted): Die darfst du umzeigen lassen (auf eine andere Stufe), aber nicht mit festen Farben füllen.
Kontrast prüfen — nicht optional
Nach jeder Farbänderung: Text auf Hintergrund muss mindestens 4,5:1 Kontrast haben, große Überschriften 3:1. Das ist keine Empfehlung, sondern gesetzliche Anforderung (BFSG ab 2025).
Prüfen kannst du das mit jedem Kontrast-Rechner im Netz — Hex-Werte eingeben, Verhältnis ablesen. Kritisch sind immer: dezenter Text auf getöntem Hintergrund und die Akzentfarbe auf Weiß.
--koi-500 (#F28322, ein warmes Orange) hat auf weißem Grund nur etwa 2,5:1. Als reine Textfarbe reicht das nicht. Sie funktioniert für Rahmen, Flächen und Icons — für Fließtext braucht es eine dunklere Stufe.