Begin met een gebruikerskeuze en een token-systeem
Gebruik de systeeminstelling als standaard met prefers-color-scheme. Als u een schakelaar aanbiedt, gebruik dan een toetsenbord-bedienbaar besturingselement met een toegankelijke naam en maak de actieve keuze programmatisch beschikbaar. Geef een handmatige selectie prioriteit in die browserversie; belooft niet dat deze keuze op een ander apparaat of in een privésessie wordt gevolgd.
Noem kleuren naar rol, niet naar uiterlijk: canvas, surface, text, muted text, border, link, accent, error, success, focus en disabled. Map elke rol in beide thema’s. Dit voorkomt dat een lichtgrijs uit het lichte thema lekt naar de donkere modus en maakt fixes herbruikbaar. Donker is niet per definitie toegankelijker of universeel gewenst; het is een andere ervaring die bruikbaar gemaakt moet worden.
Documenteer een volgorde, bijvoorbeeld opgeslagen keuze eerst en systeemvoorkeur tweede, zodat teams hetzelfde resultaat testen.
Includeer hover-, focus-, selected-, invalid-, disabled-, loading-, empty- en visited-link-staten, niet alleen defaults.
Meet contrast in het gerenderde thema
WCAG 2.2 Success Criterion 1.4.3 stelt een minimum van 4,5:1 voor normale tekst en tekst in afbeeldingen, en 3:1 voor grote tekst. Rond niet af: 4,499:1 voldoet niet aan 4,5:1. Dunne lettertypen kunnen zwakker lijken dan hun berekende kleur, dus gebruik een steviger lettertype of extra marge.
Controleer elke gerenderde voorgrond en aangrenzende achtergrond. Tekst over foto’s, verloopvullingen, translucente panelen of video heeft wisselende achtergronden, dus één token-berekening kan niet aantonen dat het leesbaar is. Gebruik een ondoorzichtige achtergrond, voldoende overlay of andere plaatsing en inspecteer vervolgens bij realistische viewports.
Onder WCAG 2.1 Success Criterion 1.4.11 moet visuele informatie die nodig is om een actief besturingselement, vereiste staat of betekenisvolle grafiek te identificeren 3:1 ten opzichte van aangrenzende kleuren hebben.
Koppel kleurveranderingen aan tekst, een pictogram, patroon, positie of een ander duidelijk signaal; fout- en geselecteerde staten mogen niet afhankelijk zijn van een subtiele tint.
Bescherm toetsenbordfocus, formulieren en staatsovergangen
Tab door beide thema’s. Focus moet zichtbaar zijn op links, knoppen, inputs, menu’s, dialoogvensters, custom widgets en de thema‑schakelaar. Verwijder de browser-outline niet tenzij de vervanging op elk oppervlak en in elke staat getest is. Een offset-outline is vaak duidelijker dan een vervagende gloed.
WCAG 2.2 Focus Appearance is een AAA-criterium en geen bewijs dat een site aan AA voldoet. Het is een nuttig doel: een indicatorgebied minstens zo groot als een perimeter van 2 CSS-pixels en 3:1 contrast tussen gefocuste en niet-gefocuste pixels. Controleer ook dat fout-, vereist-, geselecteerd- en niet-beschikbaar-staten hun betekenis behouden.
Test invoerveld-hint, ingevulde waarde, label, hulptekst, fouttekst, invalid-border, checkbox‑markering, radio‑selectie en submit‑staat afzonderlijk.
Voor checkout of een andere gereguleerde flow, gebruik een provider‑sandbox en verkrijg waar nodig een gekwalificeerde toegankelijkheids- en beveiligingsreview. Dit is educatieve richtlijn, geen conformiteits- of beveiligingsbeoordeling.
Ga om met afbeeldingen, ingesloten assets en browser-UI
Beoordeel logo’s, illustraties, screenshots, grafieken, pictogrammen en in afbeeldingen ingebakken tekst in beide thema’s. Een hergebruikt licht logo kan verdwijnen en een grafieklegenda kan falen, zelfs wanneer omliggende HTML slaagt. Lever een doelgeschikt asset of een stabiele achtergrond. Beeldmateriaal dat instructies, status of data weergeeft, moet begrijpelijk blijven.
Declareer ondersteuning voor light en dark schemes en style vervolgens paginainhoud voor het geselecteerde thema. De property color-scheme brengt browser-canvas, scrollbars, formulierbesturingselementen en andere browser-UI in lijn. Plaats bijbehorende metadata vroeg in het document. Ingesloten SVG kan reageren op het bovenliggende schema; test third-party iframes en widgets end-to-end.
Geef de voorkeur aan semantische HTML-controls. Forced-colors-gedrag gebruikt native semantiek, niet een ARIA-role toegevoegd aan een generiek element.
Inspecteer gedownloade, gecachte, traag ladende en gefaalde-afbeeldingsstaten, vooral waar tekst of actie‑cues over media liggen.
Respecteer forced colors en test de release als een systeem
Forced-colors-modus past een beperkte door de gebruiker gekozen palet toe, zoals Windows High Contrast. Browsers kunnen kleuren vervangen, schaduwen verwijderen en tekst‑backplates toevoegen. Blokkeer de override niet. Maak gerichte fixes waar een component grens of betekenis verliest, zoals een echte rand waar een schaduw affordance droeg. Emulatie kan niet elke combinatie van apparaat, browser, extensie, zoomniveau of assistive technology representeren.
Draai matrixen van routes en interacties in light, dark en forced-colors-instellingen vóór release. Chrome DevTools kan beide condities emuleren; gebruik het om review te versnellen en navigeer daarna handmatig door prioritaire flows. Scanners vinden kandidaten, maar kunnen niet alleen toegankelijkheid bepalen. SIU preflights critical theme assets and interactions, legt een release-gate vast en houdt een geteste rollback-route voor ernstige presentatie-regressies; het is geen downtime-monitoring.
Includeer landing, navigatie, zoeken, accounttoegang, formulieren, foutpagina’s, geauthenticeerde schermen en materiaalconversie-flows.
Sla geteste URL’s, browserversies, instellingen, uitzonderingen, eigenaar en rollback-trigger op zodat remediatie vanuit feiten start.