Accessibility / Color Contrast / Contrast Checker Bookmarklet

The Contrast Checker bookmarklet embeds the WebAIM Contrast Checker tool in a draggable iframe panel on the page. Loads the mini contrast checker from webaim.org, provides color pickers for foreground and background colors, displays the contrast ratio, and shows pass/fail results for WCAG AA and AAA conformance at both normal and large text sizes. The panel can be dragged by the header bar and closed with the X button or Esc key. Press Esc to close.

javascript:%21function()%7Bif(null%3D%3Ddocument.getElementById(%22contrastletdragable%22))%7Bvar%20e%3Ddocument.createElement(%22div%22)%3Be.id%3D%22contrastletdragable%22%2Ce.style.width%3D%22425px%22%2Ce.style.position%3D%22absolute%22%2Ce.style.right%3D%2220px%22%2Ce.style.top%3Dwindow.pageYOffset%2B20%2B%22px%22%2Ce.style.zIndex%3D%2210000%22%2Ce.style.boxSizing%3D%22content-box%22%3Bvar%20t%3Ddocument.createElement(%22div%22)%3Bt.id%3D%22contrastletdragzone%22%2Ct.style.width%3D%22100%25%22%2Ct.style.height%3D%2215px%22%2Ct.style.cursor%3D%22move%22%2Ct.style.backgroundColor%3D%22%230f2c65%22%2Ct.style.boxSizing%3D%22content-box%22%2Ce.appendChild(t)%2Cdocument.body.appendChild(e)%3Bvar%20o%3Ddocument.createElement(%22button%22)%3Bo.id%3D%22contrastletclose%22%2Co.style.width%3D%2215px%22%2Co.style.height%3D%2215px%22%2Co.style.float%3D%22right%22%2Co.style.padding%3D%220%22%2Co.style.border%3D%220%22%2Co.style.backgroundColor%3D%22%23777%22%2Co.style.color%3D%22%23fff%22%2Co.style.borderTop%3D%221px%20solid%20%230f2c65%22%2Co.style.borderRight%3D%221px%20solid%20%230f2c65%22%2Co.setAttribute(%22aria-label%22%2C%22Close%20Contrast%20Checker%22)%2Co.addEventListener(%22click%22%2Cfunction()%7Be.remove()%7D%2C%211)%3Bvar%20n%3Ddocument.createTextNode(%22X%22)%3Bo.appendChild(n)%2Ct.appendChild(o)%3Bvar%20r%3Ddocument.createElement(%22iframe%22)%3Br.src%3D%22https%3A%2F%2Fwebaim.org%2Fresources%2Fcontrastchecker%2Fmini%3Fver%3D2%26a%3D%22%2BMath.random()%2Cr.style.width%3D%22421px%22%2Cr.style.height%3D%22368px%22%2Cr.style.margin%3D%220px%22%2Cr.style.borderStyle%3D%22solid%22%2Cr.style.borderColor%3D%22%230f2c65%22%2Cr.style.boxSizing%3D%22content-box%22%2Ce.appendChild(r)%3Blet%20s%3D0%2Cl%3D0%3Bconst%20d%3Dfunction(e)%7Bs%3De.clientX%2Cl%3De.clientY%2Cdocument.addEventListener(%22mousemove%22%2Ci)%2Cdocument.addEventListener(%22mouseup%22%2Cc)%7D%2Ci%3Dfunction(t)%7Bconst%20o%3Dt.clientX-s%2Cn%3Dt.clientY-l%3Be.style.top%3D%60%24%7Be.offsetTop%2Bn%7Dpx%60%2Ce.style.left%3D%60%24%7Be.offsetLeft%2Bo%7Dpx%60%2Cs%3Dt.clientX%2Cl%3Dt.clientY%7D%2Cc%3Dfunction()%7Bdocument.removeEventListener(%22mousemove%22%2Ci)%2Cdocument.removeEventListener(%22mouseup%22%2Cc)%7D%3Be.addEventListener(%22mousedown%22%2Cd)%2Cdocument.addEventListener(%22keyup%22%2Cfunction(t)%7B27%3D%3D%3Dt.keyCode%26%26e.remove()%7D)%2Cr.addEventListener(%22keyup%22%2Cfunction(t)%7B27%3D%3D%3Dt.keyCode%26%26e.remove()%7D)%2Cdocument.addEventListener(%22securitypolicyviolation%22%2C()%3D%3E%7Br.remove()%3Bvar%20t%3Ddocument.createTextNode(%22The%20Content%20Security%20Policy%20on%20this%20page%20does%20not%20allow%20embedded%20iframes.%20The%20Contrast%20Checker%20Bookmarklet%20cannot%20run%20on%20this%20page.%20Press%20Esc%20to%20dismiss%20this%20message.%22)%3Be.style.backgroundColor%3D%22%23fff%22%2Ce.appendChild(t)%7D)%7D%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fwebaim.org%2Fresources%2Fcontrastchecker%2Fbookmarklet%5CnBookmarklet%20name%3A%20Contrast%20Checker%5Cn%22)%3B