Accessibility / Color / Palette Contrast Extractor Bookmarklet

The Palette Contrast Extractor bookmarklet identifies common color pairs used on the page and sorts them by contrast ratio. Samples foreground/background color pairs from visible text elements, traverses up the DOM tree to find non-transparent backgrounds, uses the WCAG 2 relative luminance formula to calculate contrast ratios, counts frequency of each color pair, and displays an alert listing the top 20 pairs sorted from lowest to highest contrast with occurrence counts. Useful for identifying which color combinations on the page may have contrast issues.

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%20o(%5Bt%2Ce%2Co%5D)%7Breturn%5Bt%2Ce%2Co%5D%3D%5Bt%2Ce%2Co%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*o%7Dfunction%20n(n%2Cr)%7Bconst%20c%3Do(e(t(n)))%2Ca%3Do(e(t(r)))%2C%5Bl%2Cs%5D%3Dc%3Ea%3F%5Bc%2Ca%5D%3A%5Ba%2Cc%5D%3Breturn(l%2B.05)%2F(s%2B.05)%7Dconst%20r%3D%5B...document.querySelectorAll(%22body%20*%22)%5D.filter(t%3D%3Et.offsetParent)%2Cc%3Dnew%20Map%3Bfor(const%20l%20of%20r)%7Bconst%20s%3DgetComputedStyle(l)%2Ci%3Ds.color%3Blet%20u%3Ds.backgroundColor%2Cm%3Dl%3Bfor(%3B(%22rgba(0%2C%200%2C%200%2C%200)%22%3D%3D%3Du%7C%7C%22transparent%22%3D%3D%3Du)%26%26(m%3Dm.parentElement)%3B)u%3DgetComputedStyle(m).backgroundColor%3Bconst%20d%3Di%2B%22%20on%20%22%2Bu%3B(l.innerText%7C%7C%22%22).trim()%26%26c.set(d%2C(c.get(d)%7C%7C0)%2B1)%7Dconst%20a%3D%5B...c.entries()%5D.map((%5Bt%2Ce%5D)%3D%3E%7Bconst%5Bo%2Cr%2Cc%5D%3Dt.split(%22%20%22)%3Breturn%7Bk%3At%2Cc%3Ae%2Cr%3An(o%2Cc)%7D%7D).sort((t%2Ce)%3D%3Et.r-e.r).slice(0%2C20).map(t%3D%3E%60%24%7Bt.r.toFixed(2)%7D%3A1%20%20%24%7Bt.k%7D%20%20(%24%7Bt.c%7D)%60).join(%22%5Cn%22)%3Balert(a%7C%7C%22No%20pairs%20found%22)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Palette%20contrast%20extractor%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(g)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bg.message)%7D%7D()%3B