Türkis heißt klickbar. Orange heißt Aufmerksamkeit.
In dem Moment, in dem Orange auch für Betonung verwendet wird, ist die Regel tot — und mit ihr der Hauptvorteil des Sicherheitswerkzeugs. Und jede Farbe braucht zwei Werte: einen leuchtenden für Flächen, einen abgedunkelten für Text.
- Türkis · Fläche
#17C3C0 - Türkis · Text auf hell
#0B6E6C - Türkis · Text auf dunkel
#46D6D2
- Grün · Fläche
#0E9F6E - Grün · Text auf hell
#0A6B49 - Grün · Text auf dunkel
#35C98D
- Orange · Fläche
#F2761C - Orange · Text auf hell
#B2540E - Orange · Text auf dunkel
#F5904A
Kalkstein — hell
- Fenster
#F5F3EE - Inhalt
#FFFFFF - Titelleiste
#EDEAE3 - Rahmen
#E1DDD4 - Text
#1C2B26 - Nebentext
#67726D - Auswahl
#17C3C0 - Akzent
#0B6E6C - Aufmerksamkeit
#B2540E - Erfolg
#0A6B49 - Fehler
#A82A24
Urgestein — dunkel
- Fenster
#12251F - Inhalt
#0B1A16 - Titelleiste
#0D1E19 - Rahmen
#1E362E - Text
#E8EDE9 - Nebentext
#7E948B - Auswahl
#17C3C0 - Akzent
#46D6D2 - Aufmerksamkeit
#F5904A - Erfolg
#35C98D - Fehler
#F0635E
Gebaut, nicht invertiert
Im hellen Thema ist der Inhalt heller als das Fenster, im dunklen dunkler. Daran erkennt man, ob ein Dark Mode gebaut oder nur invertiert wurde.
Die Auswahl bleibt gleich
Das Auswahl-Türkis ist in beiden Themen identisch — es ist der wichtigste Wiedererkennungspunkt und darf sich nicht mit der Tageszeit ändern. Im Hellen trägt es deshalb einen Rand.
Geprüft, bei jedem Bau
Jedes Text-Grund-Paar wird gegen WCAG AA gemessen: mindestens 4.5 : 1 für Text, 3.0 : 1 für Bedienelemente. Zwei Werte des Manifests fielen durch die eigene Regel und wurden korrigiert. Ein Verstoß bricht den Bau.