Accessibility / Color Contrast / Contrast Spot Check Original Bookmarklet

Click any text element to compute the contrast ratio between foreground and background colors, with pass/fail results for WCAG AA and AAA conformance levels. Displays the ratio, colors, and text size. Press Esc to stop.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bfunction%20t(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%20e(%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%20n(n%2Co)%7Bconst%20r%3De(t(n))%2Ca%3De(t(o))%2C%5Bc%2Cs%5D%3Dr%3Ea%3F%5Br%2Ca%5D%3A%5Ba%2Cr%5D%3Breturn(c%2B.05)%2F(s%2B.05)%7Dconst%20o%3Dt%3D%3E%7Bt.preventDefault()%2Ct.stopPropagation()%3Bconst%20e%3Dt.target%2Co%3DgetComputedStyle(e)%2Ca%3Do.color%3Blet%20c%3Do.backgroundColor%2Cs%3De%3Bfor(%3B%22rgba(0%2C%200%2C%200%2C%200)%22%3D%3D%3Dc%7C%7C%22transparent%22%3D%3D%3Dc%3B)%7Bif(s%3Ds.parentElement%2C%21s)%7Bc%3D%22rgb(255%2C255%2C255)%22%3Bbreak%7Dc%3DgetComputedStyle(s).backgroundColor%7Dconst%20i%3Dn(a%2Cc).toFixed(2)%2Cu%3DparseFloat(o.fontSize)%2Cd%3DparseInt(o.fontWeight%2C10)%3E%3D700%2Cl%3Du%3E%3D18%7C%7Cu%3E%3D14%26%26d%3Balert(%22Contrast%3A%20%22%2Bi%2B%22%3A1%5CnForeground%3A%20%22%2Ba%2B%22%5CnBackground%3A%20%22%2Bc%2B%22%5CnText%20size%3A%20%22%2Bu%2B%22px%22%2B(d%3F%22%20(bold)%22%3A%22%22)%2B%22%5Cn%22%2B(l%3F%22Large%20text%22%3A%22Normal%20text%22)%2B%22%5Cn%5CnWCAG%20AA%3A%20%22%2B((l%3Fi%3E%3D3%3Ai%3E%3D4.5)%3F%22PASS%22%3A%22FAIL%22)%2B%22%5CnWCAG%20AAA%3A%20%22%2B((l%3Fi%3E%3D4.5%3Ai%3E%3D7)%3F%22PASS%22%3A%22FAIL%22)%2B%22%5Cn%5CnEsc%20to%20stop%22)%2Cr()%7D%3Bfunction%20r()%7Bdocument.removeEventListener(%22click%22%2Co%2C%210)%2Cdocument.removeEventListener(%22keydown%22%2Ca%2C%210)%7Dfunction%20a(t)%7B%22Escape%22%3D%3D%3Dt.key%26%26r()%7Ddocument.addEventListener(%22click%22%2Co%2C%210)%2Cdocument.addEventListener(%22keydown%22%2Ca%2C%210)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Contrast%20spot-check%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(c)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bc.message)%7D%7D()%3B