Beginnen Sie mit einer Nutzerwahl und einem Token-System
Verwenden Sie die Systemeinstellung als Default mit prefers-color-scheme. Wenn Sie einen Schalter anbieten, verwenden Sie ein per Tastatur bedienbares Steuerelement mit einem zugänglichen Namen und machen Sie die aktive Wahl programmatisch verfügbar. Geben Sie einer manuellen Auswahl in diesem Browser-Kontext Vorrang; versprechen Sie nicht, dass sie auf ein anderes Gerät oder eine private Sitzung übertragen wird.
Benennen Sie Farben nach Rolle, nicht nach Aussehen: canvas, surface, text, muted text, border, link, accent, error, success, focus und disabled. Mappen Sie jede Rolle in beiden Themes. Das verhindert, dass ein nur für Licht designter Grauton in den Dunkelmodus durchschlägt und macht Korrekturen wiederverwendbar. Dunkel ist nicht automatisch zugänglicher oder universell bevorzugt; es ist eine weitere Erfahrung, die nutzbar gemacht werden muss.
Dokumentieren Sie eine Reihenfolge, z. B. gespeicherte Wahl zuerst und Systempräferenz zweitens, damit Teams dasselbe Ergebnis testen.
Beziehen Sie Hover-, Fokus-, Selected-, Invalid-, Disabled-, Loading-, Empty- und Visited-Link-Zustände mit ein, nicht nur Defaults.
Messen Sie Kontrast im gerenderten Theme
WCAG 2.2 Success Criterion 1.4.3 setzt ein Minimum von 4,5:1 für normalen Text und textbasierte Bilder und 3:1 für großen Text. Nicht aufrunden: 4.499:1 erfüllt nicht 4.5:1. Dünne Schriftschnitte wirken schwächer als ihre berechnete Farbe, also verwenden Sie eine kräftigere Schrift oder mehr Abstand.
Prüfen Sie jede gerenderte Vordergrundfarbe und den angrenzenden Hintergrund. Text über Fotos, Verläufen, transluzenten Panels oder Video hat wechselnde Hintergründe, daher kann eine Token-Berechnung allein die Lesbarkeit nicht beweisen. Verwenden Sie eine undurchsichtige Hinterlegung, ausreichendes Overlay oder andere Platzierung und prüfen Sie dann in realistischen Viewports.
Unter WCAG 2.1 Success Criterion 1.4.11 benötigen visuelle Informationen, die zur Identifikation eines aktiven Steuerelements, eines erforderlichen Zustands oder einer bedeutungsvollen Grafik nötig sind, 3:1 gegen angrenzende Farben.
Kombinieren Sie Farbänderungen mit Text, einem Icon, Muster, Position oder einem anderen klaren Hinweis; Fehler- und Selected-Zustände sollten nicht von einer subtilen Tönung abhängen.
Schützen Sie Tastaturfokus, Formulare und Zustandsänderungen
Tabben Sie durch beide Themes. Fokus muss auf Links, Buttons, Inputs, Menüs, Dialogen, Custom-Widgets und dem Theme-Schalter sichtbar sein. Entfernen Sie die Browser-Outline nicht, es sei denn, ihr Ersatz ist auf jeder Fläche und in jedem Zustand getestet. Ein offsetter Outline-Rand ist oft klarer als ein verfließender Glow.
WCAG 2.2 Focus Appearance ist ein AAA-Kriterium und kein Beweis dafür, dass eine Seite AA erfüllt. Es ist ein nützliches Ziel: ein Indikatorbereich mindestens so groß wie ein 2 CSS-pixel großer Umfang und 3:1 Kontrast zwischen fokussierten und nicht fokussierten Pixeln. Verifizieren Sie außerdem, dass Fehler-, Required-, Selected- und Unavailable-Zustände ihre Bedeutung behalten.
Testen Sie Eingabe-Hinweis, eingegebenen Wert, Label, Hilfetext, Fehlermeldung, ungültige Umrandung, Checkbox-Markierung, Radiobutton-Auswahl und Submit-Zustand getrennt.
Für Checkout oder andere regulierte Abläufe verwenden Sie eine Provider-Sandbox und lassen Sie gegebenenfalls eine qualifizierte Accessibility- und Sicherheitsprüfung durchführen. Dies ist eine Hinweisebene, keine Compliance- oder Sicherheitsbewertung.
Behandeln Sie Bilder, eingebettete Assets und browserseitige UI
Überprüfen Sie Logos, Illustrationen, Screenshots, Diagramme, Icons und in Bildern eingebrannte Texte in beiden Themes. Ein wiederverwendetes helles Logo kann verschwinden und eine Diagramm-Legende kann fehlschlagen, selbst wenn umgebendes HTML durchkommt. Liefern Sie ein zweckgerechtes Asset oder einen stabilen Hintergrund. Bildmaterial, das Anweisungen, Status oder Daten vermittelt, muss verständlich bleiben.
Deklarieren Sie Unterstützung für light und dark schemes und stylen Sie dann Seiteninhalt für das gewählte Theme. Die color-scheme-Eigenschaft stimmt Browser-Canvas, Scrollbars, Formularsteuerelemente und andere Browser-UI ab. Platzieren Sie entsprechende Metadaten früh im Dokument. Eingebettetes SVG kann auf das übergeordnete Scheme reagieren; testen Sie Third-Party-Iframes und Widgets End-to-End.
Bevorzugen Sie semantische HTML-Steuerelemente. Forced-color-Verhalten nutzt native Semantik, nicht ein ARIA-Role, das zu einem generischen Element hinzugefügt wurde.
Prüfen Sie heruntergeladene, gecachte, langsam ladende und fehlgeschlagene Bildzustände, besonders dort, wo Text oder Aktionshinweise über Medien liegen.
Respektieren Sie forced colors und testen Sie die Freigabe als System
Forced-colors-Modus wendet eine vom Nutzer gewählte limitierte Palette an, wie Windows High Contrast. Browser können Farben ersetzen, Schatten entfernen und Text-Backplates hinzufügen. Blockieren Sie die Überschreibung nicht. Machen Sie gezielte Korrekturen dort, wo eine Komponente Boundary oder Bedeutung verliert, z. B. eine echte Umrandung, wo ein Schatten Affordance getragen hat. Emulation kann nicht jedes Gerät, jeden Browser, jede Extension, jedes Zoom-Level oder jede Assistive-Technology-Kombination repräsentieren.
Führen Sie die Routen- und Interaktionsmatrix in Light-, Dark- und Forced-Colors-Einstellungen vor der Freigabe aus. Chrome DevTools kann beide Bedingungen emulieren; nutzen Sie es zur Beschleunigung der Überprüfung und navigieren Sie dann manuell Prioritätsabläufe. Scanner finden Kandidaten, können aber Accessibility nicht alleine beurteilen. SIU preflights kritische Theme-Assets und Interaktionen, protokolliert ein Release-Gate und behält einen getesteten Rollback-Pfad für schwere Darstellungsregressionen; es ist keine Überwachung der Betriebszeit (Status Is UP / Status Is Down).
Beziehen Sie Landing, Navigation, Suche, Account-Zugriff, Formulare, Fehlerseiten, authentifizierte Screens und Material-Konvertierungs-Flows ein.
Speichern Sie getestete URLs, Browserversionen, Einstellungen, Ausnahmen, Owner und einen Rollback-Trigger, sodass die Behebung auf Fakten aufbaut.