Ueberschritten: nur die Zeile hinterlegen, Farbe je Schwelle trennen
Zwei Rueckmeldungen des Eigentuemers vom 07.09.2026.
1. Die Service-Kachel auf "Mein Audi" war als Ganzes gelb hinterlegt. Gelb
wird jetzt nur das ueberschrittene Feld, analog zur Termingruppe im
Service-Blatt: .row.ueberschritten bzw. .dm-wertzeile--ueberschritten,
12 % --warn mit -12px Aussenabstand bis an den Kachelrand. Die dafuer
gebaute Hilfsfunktion serviceUeberschritten() entfaellt ersatzlos.
2. Auch #C55300 wirkte braeunlich. Das ist die Schwelle, nicht der Geschmack:
Apples systemOrange #FF9500 kommt auf Weiss nur auf 2,20:1, jedes Orange
mit 4,5:1 liest sich als Braun. Deshalb traegt jetzt jedes Element seine
eigene WCAG-Schwelle:
--warn-fig 32px = Grosstext, 3:1 -> #DD6000 (3,65:1 auf Weiss)
die Marke 10,5px = Kleintext, 4,5:1 -> gefuellte Pille #C55300 mit
weisser Schrift (4,55:1) statt duenner Schrift
Nachts #FF9F0A (8,41:1) bzw. #FFA056 mit #171B21 (8,57:1).
Im Panel live gemessen (Testcontainer, Tagmodus): Kachelgrund rgb(255,255,255),
nur die HU-Zeile rgba(255,159,10,0.12) und um 2 x 12px breiter als die uebrigen
Zeilen, Marke rgb(255,255,255) auf rgb(197,83,0), Kennzahl rgb(221,96,0).
Damit ist Abschnitt DJ auch im Panel optisch geprueft - OFFEN.md 3b angepasst.
327/327 Tests, tsc sauber, Buendel auf 2026.9.6.9 neu gebaut.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -12799,6 +12799,48 @@ Und die Ausgangsfrage: die **Fläche** ist Apple (die 2026-08-13 übernommene
|
||||
iOS-Palette), das Audi-CI-Gelb `#ffaa00` wurde damals abgelöst und liefert als
|
||||
Schrift nur 1,91:1. Die **Schrift** ist gemessen, nicht übernommen.
|
||||
|
||||
### Nachtrag 07.09.2026: eine Farbe reichte nicht, zwei Rollen reichen
|
||||
|
||||
Auch `#C55300` meldete der Eigentümer als „bräunlich". Der Befund ist keine
|
||||
Geschmacksfrage, sondern die Schwelle selbst: **kräftiges Orange ist bei 4,5:1
|
||||
nicht zu haben.** Apples systemOrange `#FF9500` kommt auf Weiß auf **2,20:1**;
|
||||
jedes Orange, das 4,5:1 schafft, ist so dunkel, dass es als Braun gelesen wird.
|
||||
|
||||
Deshalb tragen die beiden Elemente jetzt **jeweils ihre eigene Schwelle**:
|
||||
|
||||
| Element | Größe | WCAG-Schwelle | Wert | gemessen |
|
||||
|---|---|---|---|---|
|
||||
| Kennzahl `--warn-fig` | 32 px = Großtext | 3:1 | `#DD6000` | 3,65:1 auf Weiß, 3,34:1 auf der Hülle |
|
||||
| Marke, Tag | 10,5 px = Kleintext | 4,5:1 | `#C55300` **gefüllt**, Schrift weiß | 4,55:1 |
|
||||
| Kennzahl nachts | 32 px | 3:1 | `#FF9F0A` | 8,41:1 auf `#171B21` |
|
||||
| Marke, Nacht | 10,5 px | 4,5:1 | `#FFA056` gefüllt, Schrift `#171B21` | 8,57:1 |
|
||||
|
||||
Der Kniff bei der Marke: **nicht dünne Schrift, sondern eine gefüllte Pille.**
|
||||
Derselbe Ton liest sich als Fläche eindeutig als Orange, während er als
|
||||
1 px starker Buchstabenstrich bräunlich wirkt - und weiße Schrift auf `#C55300`
|
||||
erfüllt die 4,5:1 exakt so, wie es umgekehrt nicht ginge.
|
||||
|
||||
Tokens dafür: `--warn-fig`, `--warn-marke-grund`, `--warn-marke-schrift` in
|
||||
`audi-dashboard-ios.css` und `design-system/src/tokens/tokens.css`.
|
||||
|
||||
### Nachtrag 07.09.2026: nur die Zeile, nicht die Kachel
|
||||
|
||||
Die Service-Kachel auf „Mein Audi" war kurzzeitig **als Ganzes** hinterlegt
|
||||
(`.tile.ueberschritten`). Der Eigentümer hat das zurückgewiesen: gelb wird nur
|
||||
das überschrittene Feld, analog zur Termingruppe im Service-Blatt. Die Kachel
|
||||
trägt jetzt keinen Sonderstil mehr, stattdessen bekommt die betroffene Zeile
|
||||
`.row.ueberschritten` (App: `.dm-wertzeile--ueberschritten`) - 12 % `--warn`,
|
||||
`--r-tile`, und über `margin-left/right: -12px` läuft die Tönung bis an den
|
||||
Kachelrand. Die dafür gebaute Hilfsfunktion `serviceUeberschritten()` ist
|
||||
ersatzlos entfallen; die App-Seite reicht `ueberschritten` als Eigenschaft an
|
||||
`Wertzeile` durch.
|
||||
|
||||
**Gemessen im Panel (Testcontainer, 2026.9.6.9):** Kachelgrund
|
||||
`rgb(255,255,255)`, nur die HU-Zeile `rgba(255,159,10,0.12)` und mit 752 px
|
||||
gegenüber 728 px der ungetönten Zeilen um genau 2 × 12 px breiter - die Tönung
|
||||
reicht also bis an den Rand. Marke: `rgb(255,255,255)` auf `rgb(197,83,0)`.
|
||||
Kennzahl der Übersicht: `rgb(221,96,0)`.
|
||||
|
||||
### Geprüft
|
||||
|
||||
* **15 Fälle** gegen die echten Panel-Funktionen (aus der Panel-Quelle
|
||||
|
||||
Reference in New Issue
Block a user