[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"blog-dark-mode-token-checker-ship-accessible-light-and-dark-themes\u002F":3},{"id":4,"title":5,"author":6,"body":9,"date":87,"description":88,"extension":89,"image":90,"meta":91,"navigation":92,"path":93,"published":92,"seo":94,"stem":95,"tags":96,"__hash__":101},"blog\u002Fblog\u002Fdark-mode-token-checker-ship-accessible-light-and-dark-themes.md","Dark Mode Token Checker: Ship Accessible Light and Dark Themes",{"name":7,"to":8},"Brand Peel Team","https:\u002F\u002Fx.com\u002Fjonasfroeller",{"type":10,"value":11,"toc":81},"minimark",[12,16,19,22,27,36,58,61,65,73],[13,14,15],"p",{},"Dark mode is not an inverted palette.",[13,17,18],{},"It is a second system of semantic decisions: surfaces, text, borders, accents, success, warning, and error states all need to remain readable.",[13,20,21],{},"That is why token roles matter more than one-off color picks.",[23,24,26],"h2",{"id":25},"what-to-check","What to check",[13,28,29,30,35],{},"The ",[31,32,34],"a",{"href":33},"\u002Ftools\u002Fdark-mode-token-checker","Dark Mode Token Checker"," tests:",[37,38,39,43,46,49,52,55],"ul",{},[40,41,42],"li",{},"light text on light surfaces",[40,44,45],{},"dark text on dark surfaces",[40,47,48],{},"accent usability",[40,50,51],{},"semantic state contrast",[40,53,54],{},"role duplication",[40,56,57],{},"CSS variable export readiness",[13,59,60],{},"The output gives you a contrast matrix, recommendations, and copyable CSS variables.",[23,62,64],{"id":63},"build-the-system","Build the system",[13,66,67,68,72],{},"Use the ",[31,69,71],{"href":70},"\u002Ftools\u002Fbrand-color-accessibility-checker","Brand Color Accessibility Checker"," for broad palette checks first.",[13,74,75,76,80],{},"Then move safe roles into the ",[31,77,79],{"href":78},"\u002Ftools\u002Fdesign-token-starter-generator","Design Token Starter Generator",".",{"title":82,"searchDepth":83,"depth":83,"links":84},"",2,[85,86],{"id":25,"depth":83,"text":26},{"id":63,"depth":83,"text":64},"2026-08-03","Check light and dark theme token pairs for contrast and consistency before you ship both modes.","md",null,{},true,"\u002Fblog\u002Fdark-mode-token-checker-ship-accessible-light-and-dark-themes",{"title":5,"description":88},"blog\u002Fdark-mode-token-checker-ship-accessible-light-and-dark-themes",[97,98,99,100],"dark-mode","design-tokens","accessibility","css","yPng9AJnPhF27I2V9FxgAtzq5Ji1nBx-11EN8O29PaU",1786925788309]