Accessibility / Color / Non Text Contrast Auditor Bookmarklet

The Non-Text Contrast Auditor bookmarklet checks focus indicator thickness and contrast on interactive controls. Finds all focusable elements (links, buttons, inputs, etc.), temporarily focuses each element to trigger its focus styles, measures the outline width and calculates contrast between outline color and background color, flags elements with outline width < 2px or contrast ratio < 3:1 (WCAG AA minimum for non-text contrast), outlines problematic controls in red, and displays an alert with counts of low-contrast and thin rings. Run again to remove.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bfunction%20t(t)%7Bconst%20e%3Ddocument.createElement(%22canvas%22).getContext(%222d%22)%3Breturn%20e.fillStyle%3Dt%2Ce.fillStyle%7Dfunction%20e(t)%7Bconst%20e%3Dt.match(%2Frgba%3F%5C((%5Cd%2B)%2C%5Cs*(%5Cd%2B)%2C%5Cs*(%5Cd%2B)%2Fi)%3Breturn%20e%3F%5B%2Be%5B1%5D%2C%2Be%5B2%5D%2C%2Be%5B3%5D%5D%3A%5B0%2C0%2C0%5D%7Dfunction%20n(%5Bt%2Ce%2Cn%5D)%7Breturn%5Bt%2Ce%2Cn%5D%3D%5Bt%2Ce%2Cn%5D.map(t%3D%3E(t%2F%3D255)%3C%3D.03928%3Ft%2F12.92%3AMath.pow((t%2B.055)%2F1.055%2C2.4))%2C.2126*t%2B.7152*e%2B.0722*n%7Dfunction%20o(o%2Cr)%7Bconst%20c%3Dn(e(t(o)))%2Cl%3Dn(e(t(r)))%2C%5Bi%2Ca%5D%3Dc%3El%3F%5Bc%2Cl%5D%3A%5Bl%2Cc%5D%3Breturn(i%2B.05)%2F(a%2B.05)%7Dconst%20r%3D%22a11y-nontext-contrast%22%2Cc%3Ddocument.getElementById(r)%3Bc%26%26c.remove()%3Bconst%20l%3Ddocument.createElement(%22div%22)%3Bl.id%3Dr%2Cl.style%3D%22position%3Afixed%3Binset%3A0%3Bpointer-events%3Anone%3Bz-index%3A2147483647%22%3Bconst%20i%3D%5B...document.querySelectorAll(%27a%5Bhref%5D%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)%27)%5D.filter(t%3D%3Et.offsetParent)%3Blet%20a%3D0%2Cs%3D0%3Bfor(const%20d%20of%20i)%7Bconst%20u%3Ddocument.activeElement%3Bd.focus()%3Bconst%20m%3DgetComputedStyle(d)%2Cp%3DparseFloat(m.outlineWidth)%7C%7C0%2Cg%3Dm.outlineColor%3Blet%20f%3Dm.backgroundColor%2Ch%3Dd%3Bfor(%3B(%22rgba(0%2C%200%2C%200%2C%200)%22%3D%3D%3Df%7C%7C%22transparent%22%3D%3D%3Df)%26%26(h%3Dh.parentElement)%3B)f%3DgetComputedStyle(h).backgroundColor%3Bconst%20x%3Do(g%2Cf)%3Bp%3C2%26%26s%2B%2B%2Cx%3C3%26%26a%2B%2B%3Bconst%20y%3Dd.getBoundingClientRect()%2Cb%3Ddocument.createElement(%22div%22)%3Bb.style%3D%60position%3Aabsolute%3Bleft%3A%24%7By.left%2BscrollX%7Dpx%3Btop%3A%24%7By.top%2BscrollY%7Dpx%3Bwidth%3A%24%7By.width%7Dpx%3Bheight%3A%24%7By.height%7Dpx%3Bborder%3A2px%20solid%20%24%7Bx%3C3%3F%22%23e00%22%3A%22%230a0%22%7D%60%2Cb.title%3D%60ring%20%24%7Bp%7Dpx%2C%20contrast%20%24%7Bx.toFixed(2)%7D%3A1%60%2Cl.appendChild(b)%2Cu%26%26u.focus%26%26u.focus()%7Ddocument.body.appendChild(l)%2Calert(%60Low%20contrast%20rings%3A%20%24%7Ba%7D%20%20Thin%20rings%3A%20%24%7Bs%7D%60)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Non%20text%20contrast%20auditor%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(C)%7Balert(%22Bookmarklet%20Error%3A%20%22%2BC.message)%7D%7D()%3B