# Farbe

Cremepapier, warmes Tinte und ein lebhaftes Orange. Feitio verwendet wenig Farbe absichtlich: Raffinement liegt darin, wie viele Farben draußen bleiben.

## Die Rollen

Kein Komponente kennt eine Farbe; es kennt eine Rolle: Oberfläche, Text, Akzent. Jedes Thema füllt dieselben Rollen aus, weshalb das Umschalten von Themen oder Tag auf Nacht nichts bricht.

**surface**the page background

**surface-raised**blocks on the page

**surface-top**lifted paper

**text**main text

**text-soft**supporting text

**accent**the main action, focus

**accent-strong**links and notes

**ok**it worked: moss

**warn**attention: mustard

**error**it failed: wine

Auch: `on-accent` (Text auf dem Orange), `line` (Haarlinien), `shadow` (der Papier-Schatten) und eine Oberfläche für jeden Status (`ok-surface`, `warn-surface`, `error-surface`).

## Regeln

### Eins Orange pro Bildschirm

Der Akzent geht auf die Hauptaktion und nichts anderes. Links und Notizen verwenden das starke Orange, dunkler, was als Text gelesen wird.

Do

Änderungen speichern[Die Geschichte ansehen.](#um-laranja)

Eins Orange auf die Aktion; der Link im starken Orange, der nicht konkurriert.

Don’t

**Einstellungen**Speichern

Title und Button in Orange: das Auge weiß nicht, wohin es gehen soll.

### Farbe spricht nie allein

Ein Status kommt immer mit einem Icon und einem Wort für Menschen, die Farben nicht unterscheiden können, und für Schwarz-Weiß-Drucke.

Do

OnlineOffline

Icon, Wort und Farbe zusammen.

Don’t

Zwei Punkte: Für Menschen, die Farben nicht unterscheiden können, sind sie gleich.

### Fehler ist Wein, nie Orange

Der Wein wurde vom Orange entfernt, damit ein Fehler nie wie die Hauptaktion aussieht.

### Keine Farbe von Hand geschrieben

Immer die Rolle, `var(--feitio-color-…)`. Eine von Hand geschriebene Farbe ändert sich nicht nachts oder in einer Fassade.

## Tag und Nacht

Nacht ist nicht der umgekehrte Tag. Jede Rolle hat ihren eigenen Wert im Dunkeln: das Papier wird zu warmem Kohlegrau, das Creme wird zum Tinte und das Orange der Links leuchtet auf, um lesbar zu bleiben. Das Orange der Hauptaktion ist in beiden Modi gleich, tief mit cremefarbenem Text. Ohne Wahl von der Seite folgt Feitio dem Systemmodus.

**By day**

Creme, fast-schwarze Tinte, Orange.

Save

`surface: oklch(96% 0.018 80)`

**At night**

Warmes Kohlegrau, Creme als Tinte, dasselbe Orange.

Save

`surface: oklch(22% 0.016 55)`

## Fassaden

-   Außenbereich (eine Shop-Seite) bekommt eine Fassade: ein Theme, das nur die Farben ändert und dieselben Rollen füllt.
-   Schriftart, Form, Raum und Bewegung bleiben Feitio vorbehalten.
-   Eine Fassade wird tagseitig geboren und erhält eine Nachtversion, wenn die Arbeit dies erfordert.
-   Der Kontrasttest gilt ebenfalls: Eine Fassade, die scheitert, darf nicht eindringen.

## Kontrast

Jedes Paar mit Text oder Bedeutung erfüllt WCAG 2.2 AA, tagsüber und nachts: 4,5 für Text, 3 für Formen. Feitios Test prüft jedes Paar und versagt den Build, wenn eines fällt.

Paar

Nutzung

Tag

Nacht

Minimum

`text / surface`

Haupttext

13,9

14,1

4,5

`text-soft / surface`

unterstützender Text

6,4

8,1

4,5

`accent-strong / surface`

Links und Notizen

5,8

8,0

4,5

`on-accent / accent`

Hauptbutton-Text

5,0

5,0

4,5

`accent / surface`

main button, focus

4,8

3,2

3

`warn / warn-surface`

attention notice

4,8

7,5

4,5

WCAG 2 überschätzt dunklen Text auf gesättigten Mitteltonfarben: das alte Orange mit dunklem Text wurde mit 5,2 bestanden und ermüdet weiterhin die Augen. Deshalb ist das Orange tief und der Text darauf Creme; die Wahrnehmungsmaßnahme (APCA) stimmt überein, mit Lc 79 gegenüber 40 zuvor.