Makeover für Design02
bearbeitet von Matthias ScharwiesServus!
>
> > Der **Header** besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.
> >
> > [![](/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png?size=medium)](/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png)
> >
> > Die Mitte finde ich besser - ihr auch?
>
> Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. ...
>
> Der blau-graue Text im violetten Beispiel ist schlicht unlesbar; der kleine Weiße ist schon schwierig
Du meinst `nav ul a`? Ich würde gerne erst einmal den Hintergund festlegen.
Im [blauen, roten und violetten Theme](http://svg.bplaced.net/design02/) habe ich jetzt einen einfachen Verlauf - ist das so ok?
In den Dark Mode-Themes gelb, grün, und ornage weiß ich noch nicht, wie ich's machen soll - im Grünen habe ich den Verlauf nicht nur im Header - gut so?
Gelb ohne Verlauf ist mir zu dunkel.
Orange hat eben noch den repeating-linear-gradient() - einmal lassen oder es lieber einheitlich darstellen.
# Navigation
>
> Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. ...
Im blauen Theme habe ich die Navigation jetzt mit hintergund versehen:
~~~ CSS
nav a {
background: var(--accentColor1);
color: var(--backgroundColor2);
text-decoration: none;
display: inline-block;
font-size: 1.2em;
padding: 0.5em;
}
nav a:hover,
nav a:focus {
background: var(--backgroundColor2);
color: var(--accentColor1);
}
~~~
Wie sieht das aus? Soll ich das in allen *light Themes* blau, rot und violett, evtl auch orange so machen?
Gelb und grün haben genug Kontrast, da könnte man es so lassen?
# Linkfarbe(n)
Im blauen und violetten Theme sind Links in Akzentfarbe, das passt vom kontrast, gelb auf Lila hat sallerdings nur 2.34:1 - zu wenig - habt ihr Ideen?
In Rot geht's grad noch, aber skyblue auf rot ist auch schon zu wenig.
Grün auf grau und blau auf Orange haben beide viel zu wenig - Vorschläge anyone?
----------
Das Beispiel soll die verschiedenen Akzentfarben vorstellen, aber eben auch, wie man sie erfolgreich einsetzt!
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“