{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kontrastmodus-forced-colors",
 "name": "Kontrastmodus und contrast-color()",
 "name_en": "Forced colors mode and contrast-color() for brand colours",
 "kurz": "Eine Farbberatungsseite, die im Windows-Kontrastmodus bedienbar bleibt: Knöpfe, Fokus und Auswahl in Systemfarben, nur Farbtöne behalten ihre Farbe, Text auf jedem Ton wählt contrast-color().",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "robust",
  "klar",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Seite bleibt bedienbar, wenn Windows einen Kontrastmodus erzwingt. Dann ersetzt der Browser alle Farben durch wenige Systemfarben, box-shadow, text-shadow und Hintergrundverläufe fallen weg. Kleine Korrekturen unter @media (forced-colors: active) halten Knöpfe, Fokus und Auswahlzustände sichtbar: transparente Rahmen und outline statt Schatten, Systemfarben wie CanvasText, LinkText, ButtonText und Highlight. Nur echte Farbmuster behalten mit forced-color-adjust: none ihre Farbe. Für Text auf Markenfarben wählt contrast-color() automatisch Schwarz oder Weiß, mit festem Fallback für ältere Browser.",
  "warum_es_wirkt": "Menschen mit Sehbehinderung, Migräne oder Lichtempfindlichkeit nutzen den Kontrastmodus. Seiten, die Zustände nur über Hintergrundfarbe oder Schatten zeigen, werden dort unbedienbar: Knöpfe verlieren ihre Kante, der Fokus verschwindet, die Auswahl ist nicht mehr zu erkennen. Mit wenigen Zeilen bleibt alles lesbar, und die Markenfarben im Normalmodus bleiben unangetastet.",
  "wann_einsetzen": "Auf jeder Seite, besonders bei Knöpfen ohne Rahmen, Fokusringen per box-shadow, Auswahl über Hintergrundfarbe, Icons als Hintergrundbild und Farbflächen mit Text. contrast-color() überall, wo Kunden Markenfarben wechseln oder Farben aus Daten kommen (Farbtonkarten, Kategorien, Themes).",
  "wann_nicht": "Keine eigene Gestaltung für den Kontrastmodus bauen: nur kleine Korrekturen. forced-color-adjust: none nicht großflächig setzen, sonst übersteuert die Seite die Wahl der Nutzer. contrast-color() nicht für Mitteltöne verlassen: dort reichen weder Schwarz noch Weiß sicher für 4,5 : 1.",
  "varianten": [
   "Korrekturen per transparentem Rahmen und outline, die der Kontrastmodus sichtbar macht",
   "Auswahlzustand mit Highlight und HighlightText statt Hintergrundfarbe",
   "Farbmuster und Logos mit forced-color-adjust: none, alles andere mit Systemfarben",
   "contrast-color() mit @supports-Fallback für Text auf frei wählbaren Markenfarben",
   "Simulation per eigener Klasse mit Systemfarben für Präsentation und Abnahme"
  ],
  "umsetzung": "Grundregel: Kanten und Zustände nie nur über Hintergrund oder Schatten. Entweder im Grundstil transparenter Rahmen und transparente outline (der Kontrastmodus färbt sie ein) oder, wie in dieser Demo, alle Korrekturen gesammelt in @media (forced-colors: active): .knopf { border: 2px solid ButtonText } :focus-visible { outline: 3px solid Highlight; outline-offset: 3px } .gewaehlt { background-color: Highlight; color: HighlightText } a { color: LinkText }. Icons als Inline-SVG mit currentColor. forced-color-adjust: none nur für Farbmuster und Vorschauen, in denen die Farbe die Information ist, dazu immer der Name als Text. Text auf Markenfarben: color: var(--auf-marke); @supports (color: contrast-color(red)) { color: contrast-color(var(--marke)) }; den Fallback pro Farbe vorberechnen (Schwarz oder Weiß nach WCAG-Kontrast). Mitteltöne meiden. Die Simulation der Demo ist eine Klasse mit Systemfarben als Variablen und übernimmt die Regeln aus dem echten Block per Script; echt prüfen in Chrome DevTools, Rendering, „Emulate CSS media feature forced-colors“, oder unter Windows, Einstellungen, Barrierefreiheit, Kontrastdesigns.",
  "mobil": "Windows-Kontrastmodus betrifft vor allem Desktop und Tablets mit Windows. contrast-color() wirkt überall. Auf iOS und Android gibt es eigene Einstellungen (z. B. erhöhter Kontrast), die prefers-contrast melden, nicht forced-colors.",
  "reduzierte_bewegung": "Nicht betroffen; der Wechsel in die Simulation ist ohne Überblendung.",
  "barrierefreiheit": "1.4.3 Kontrast (AA): Text auf Markenfarben über contrast-color() oder vorberechneten Fallback mindestens 4,5 : 1; Mitteltöne meiden. 1.4.11 Nicht-Text-Kontrast (AA): Kanten von Knöpfen, Feldern und Auswahl bleiben im Kontrastmodus sichtbar (transparente Rahmen werden zu ButtonText bzw. CanvasText). 2.4.7 Fokus sichtbar (AA): Fokus als outline statt nur box-shadow. 1.4.1 Benutzung von Farbe (A): Auswahl zusätzlich mit Haken und Text, Farbmuster mit Namen. 1.1.1 Nicht-Text-Inhalt (A): Icons als Inline-SVG mit currentColor statt Hintergrundbild. forced-color-adjust: none nur für Farbmuster, weil dort die Farbe selbst die Information ist."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
  "dauer_ms": "150",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Kurve und Dauer aus dem Rezept handwerk-werkstatt-klartext (Holzrausch .15s cubic-bezier(.4,0,.2,1)); das Muster selbst ist kein Bewegungsmuster",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept handwerk-werkstatt-klartext (bewegung)"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.2, 1)",
  "name": "Material Standard",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Microsoft Edge Blog: Styling for Windows high contrast with new standards for forced colors",
   "url": "https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/",
   "auszeichnung": "",
   "beobachtung": "Zustände per box-shadow gehen im Kontrastmodus verloren, transparente outline wird dort sichtbar; Systemfarben wie Canvas und CanvasText statt fester Farben; forced-color-adjust: none nur, wo nötig, etwa für Farbmuster.",
   "art": "artikel"
  },
  {
   "seite": "MDN: forced-colors",
   "url": "https://developer.mozilla.org/docs/Web/CSS/@media/forced-colors",
   "auszeichnung": "",
   "beobachtung": "Liste der überschriebenen Eigenschaften (color, background-color, border-color, outline-color, SVG fill und stroke …); box-shadow, text-shadow und nicht-URL-background-image werden none; Medienabfrage nur für kleine Korrekturen, keine eigene Gestaltung.",
   "art": "artikel"
  },
  {
   "seite": "MDN: contrast-color()",
   "url": "https://developer.mozilla.org/docs/Web/CSS/color_value/contrast-color",
   "auszeichnung": "",
   "beobachtung": "Liefert white oder black, je nachdem was stärker mit der Eingabefarbe kontrastiert; bei Gleichstand white. Warnung: Mitteltöne erreichen mit keiner der beiden Farben sicher gut lesbaren Text. Seit April 2026 als Baseline neu verfügbar markiert.",
   "art": "artikel"
  },
  {
   "seite": "GOV.UK Design System: Skip link (Changelog)",
   "url": "https://design-system.service.gov.uk/components/skip-link",
   "auszeichnung": "",
   "beobachtung": "Version 5.14.0 (Januar 2026) behebt einen Fokus-Stil, der im Kontrastmodus abgeschnitten war: Beleg, dass auch große Designsysteme den Modus laufend nachprüfen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Microsoft Edge Blog: Styling for Windows high contrast with new standards for forced colors",
   "url": "https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/"
  },
  {
   "titel": "MDN: forced-colors",
   "url": "https://developer.mozilla.org/docs/Web/CSS/@media/forced-colors"
  },
  {
   "titel": "MDN: contrast-color()",
   "url": "https://developer.mozilla.org/docs/Web/CSS/color_value/contrast-color"
  },
  {
   "titel": "Chrome DevTools: Emulate CSS media features",
   "url": "https://developer.chrome.com/docs/devtools/rendering/emulate-css"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "checkbox-radio-animiert",
  "theme-umschalter-view-transition",
  "kontakt-anfrage-formular",
  "validierung-nach-interaktion"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Quellen am 01.11.2026 per WebFetch geprüft (Edge Blog, MDN forced-colors, MDN contrast-color, Chrome DevTools).",
   "Browserstand am 02.11.2026 bestätigt: contrast-color() in Chrome 147 (Release Notes 147, stabil 07.04.2026), Fokusbereich von Interop 2026 (web.dev), MDN: Baseline 2026, neu verfügbar seit April 2026.",
   "Kein Produktionsbeleg einer bekannten Award-Seite; Belege sind Leitfäden und Hersteller-Doku."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Farbberatungsseite, die im Windows-Kontrastmodus bedienbar bleibt: Knöpfe, Fokus und Auswahl in Systemfarben, nur Farbtöne behalten ihre Farbe, Text auf jedem Ton wählt contrast-color().",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.4, 0, 0.2, 1) (Rezept handwerk-werkstatt-klartext, Holzrausch)",
   "dauer_ms": 150,
   "medienabfrage": "@media (forced-colors: active)",
   "korrekturen": ".knopf { border: 2px solid ButtonText } (Signal 3px); :focus-visible { outline: 3px solid Highlight; outline-offset: 3px }; .ort::before { background-color: Highlight } + aktives Label color: HighlightText; .chip { border: 1px solid ButtonText }, gewählt background-color: Highlight, color: HighlightText; .ton, .wand { forced-color-adjust: none } + .ton { outline: 1px solid CanvasText }, gewählt outline 4px Highlight; Logo circle fill: CanvasText, path stroke: Canvas; aktueller Menüpunkt color: Highlight",
   "fokus_normal": "box-shadow 0 0 0 3px #efedea, 0 0 0 5px #1a1a1a (fällt im Kontrastmodus weg, deshalb outline im Block)",
   "contrast_color": "color: var(--auf-ton); @supports (color: contrast-color(red)) { color: contrast-color(var(--ton)) }; Fallback vorberechnet: Schwarz, wenn Kontrast zu Schwarz größer, sonst Weiß (Gleichstand Weiß)",
   "toene": "Kalkweiß #f2efe8 18,29 : 1, Lehm #c9a27e 8,95, Salbei #9daa8a 8,55, Ocker #c98a2b 7,15, Rost #b5603a 4,70 (knapp), Muldenblau #3e6e9e 5,34, Tannengrün #2f4a3a 9,72, Anthrazit #33363a 12,14",
   "signal": "#fb6100, Text per contrast-color() Schwarz (6,81 : 1)",
   "simulation": "Klasse .fc-sim mit --sys-Canvas, --sys-CanvasText, --sys-LinkText, --sys-ButtonFace, --sys-ButtonText, --sys-Highlight, --sys-HighlightText, --sys-GrayText; Kontrast Schwarz #000/#fff/#ffff00/#000/#fff/#1aebff/#000/#3ff23f, Kontrast Weiß #fff/#000/#00009f/#fff/#000/#37006e/#fff/#600000; Erzwingen per :where() mit !important, Korrekturen werden zur Laufzeit aus dem @media-Block kopiert (.fc-sim.korr …, Systemfarben → var(--sys-…))",
   "farben": "Grund #efedea, Karte #f8f7f4, Zement #d3cdc2, Text #1a1a1a, leise #4a4640, Signal #fb6100",
   "schriften": "Special Gothic 700 (Titel), Special Gothic wdth 75 Versal +0.04em (Gewerk-Labels), Atkinson Hyperlegible Next (Text), Geist Mono (Codes)"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten; alle Ziele mindestens 44 px, Werkstattkarte zweispaltig unter 520 px. Der Windows-Kontrastmodus betrifft Touch-Geräte mit Windows; contrast-color() wirkt überall.",
  "reduziert": "Keine Übergänge bei Farbwechsel und Auswahl, gewählter Ton hebt sich nicht an. Der Wechsel in die Simulation ist ohnehin ohne Bewegung.",
  "korrekturen": {
   "umsetzung": "Grundregel: Kanten und Zustände nie nur über Hintergrund oder Schatten. Entweder im Grundstil transparenter Rahmen und transparente outline (der Kontrastmodus färbt sie ein) oder, wie in dieser Demo, alle Korrekturen gesammelt in @media (forced-colors: active): .knopf { border: 2px solid ButtonText } :focus-visible { outline: 3px solid Highlight; outline-offset: 3px } .gewaehlt { background-color: Highlight; color: HighlightText } a { color: LinkText }. Icons als Inline-SVG mit currentColor. forced-color-adjust: none nur für Farbmuster und Vorschauen, in denen die Farbe die Information ist, dazu immer der Name als Text. Text auf Markenfarben: color: var(--auf-marke); @supports (color: contrast-color(red)) { color: contrast-color(var(--marke)) }; den Fallback pro Farbe vorberechnen (Schwarz oder Weiß nach WCAG-Kontrast). Mitteltöne meiden. Die Simulation der Demo ist eine Klasse mit Systemfarben als Variablen und übernimmt die Regeln aus dem echten Block per Script; echt prüfen in Chrome DevTools, Rendering, „Emulate CSS media feature forced-colors“, oder unter Windows, Einstellungen, Barrierefreiheit, Kontrastdesigns."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept handwerk-werkstatt-klartext, erfundener Malerbetrieb Muldenton aus Zwickau (Farbberatung mit Musterflächen). Eigene SVG-Raumecke, deren Wände die gewählte Farbe tragen, Werkstattkarte mit 8 Tönen; der Ton Rost zeigt den Mittelton-Fall (4,70 : 1, knapp). Die Vorführung wechselt Töne (Text springt per contrast-color() zwischen Schwarz und Weiß), schaltet die Simulation erst ohne Korrekturen (5 rote Marken), dann mit (grüne Haken) und zeigt das helle Design. Die Simulation ist eine Näherung (Werte nach den klassischen Windows-Designs Kontrast Schwarz und Weiß); sie kopiert die Regeln aus dem echten @media-Block, damit es nur eine Quelle gibt. Headless-Chromium der Prüfung unterstützt contrast-color(). Quellen: blogs.windows.com, developer.mozilla.org, developer.chrome.com. AD-Review 02.11.2026: Note 5. Nachgebessert: Pult kompakt (272 px) in der rechten oberen Ecke der Raumansicht, scrollt mit der Seite und bleibt am Desktop offen; Befund und Prüfhinweise als aufklappbares details. Unter 860 px unten fest, Fuß mit Abstand."
 }
}