Accessibility / Color / Forced Colors Preview

The Forced Colors Preview bookmarklet approximates the Windows high contrast mode / forced colors appearance. Applies CSS that overrides backgrounds to transparent/black, sets text to white, makes links cyan with underlines, gives form controls white borders on black backgrounds, and applies grayscale + contrast filters to images and videos. Useful for testing whether pages remain usable when users' color preferences override the site's design. Run again to remove.

WCAG SC 1.4.11: Non-text Contrast
Run Forced Colors Preview

Test run or drag to
bookmarklets bar to install

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20t%3D%22a11y-forced-colors%22%2Co%3Ddocument.getElementById(t)%3Bif(o)return%20void%20o.remove()%3Bconst%20e%3Ddocument.createElement(%22style%22)%3Be.id%3Dt%2Ce.textContent%3D%22*%7Bbackground%3Atransparent%20%21important%3B%20box-shadow%3Anone%20%21important%7D%5Cn%5Ct%5Ctbody%7Bbackground%3A%23000%20%21important%3B%20color%3A%23fff%20%21important%7D%5Cn%5Ct%5Cta%7Bcolor%3A%230ff%20%21important%3B%20text-decoration%3Aunderline%20%21important%7D%5Cn%5Ct%5Ctbutton%2Cinput%2Cselect%2Ctextarea%7Bbackground%3A%23000%20%21important%3B%20color%3A%23fff%20%21important%3B%20border%3A2px%20solid%20%23fff%20%21important%7D%5Cn%5Ct%5Ctimg%2Cvideo%2Csvg%7Bfilter%3Agrayscale(100%25)%20contrast(120%25)%20%21important%7D%22%2Cdocument.head.appendChild(e)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Forced%20colors%20preview%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(t)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bt.message)%7D%7D()%3B
← Back to all bookmarklets