Accessibility / Color Contrast / Contrast Spot Check

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20t%3D%22a11y-contrast-check%22%3Bfunction%20e(t)%7Bif(t.startsWith(%22%23%22))%7Bconst%20e%3Dt.slice(1)%3Bif(3%3D%3D%3De.length)return%5BparseInt(e%5B0%5D%2Be%5B0%5D%2C16)%2CparseInt(e%5B1%5D%2Be%5B1%5D%2C16)%2CparseInt(e%5B2%5D%2Be%5B2%5D%2C16)%5D%3Bif(6%3D%3D%3De.length)return%5BparseInt(e.slice(0%2C2)%2C16)%2CparseInt(e.slice(2%2C4)%2C16)%2CparseInt(e.slice(4%2C6)%2C16)%5D%7Dconst%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(t%2Co)%7Bconst%20a%3Dn(e(t))%2Cs%3Dn(e(o))%2C%5Bi%2Cr%5D%3Da%3Es%3F%5Ba%2Cs%5D%3A%5Bs%2Ca%5D%3Breturn(i%2B.05)%2F(r%2B.05)%7Dconst%20a%3Ddocument.createElement(%22div%22)%3Ba.id%3Dt%2Ca.style.cssText%3D%22position%3Afixed%3Btop%3A10px%3Bright%3A10px%3Bz-index%3A999999%3B%22%2Cdocument.body.appendChild(a)%3Bconst%20s%3Da.attachShadow(%7Bmode%3A%22open%22%7D)%3Bs.innerHTML%3D%27%5Cn%5Ct%5Ct%5Ct%3Cstyle%3E%5Cn%5Ct%5Ct%5Ct%5Ct%3Ahost%20%7B%20display%3A%20block%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.modal%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfont-family%3A%20system-ui%2C%20-apple-system%2C%20sans-serif%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfont-size%3A%200.8125rem%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctbackground%3A%20%23fff%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctborder%3A%201px%20solid%20%23ccc%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctborder-radius%3A%206px%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctbox-shadow%3A%200%204px%2012px%20rgba(0%2C0%2C0%2C0.15)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctwidth%3A%20240px%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctoverflow%3A%20hidden%3B%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct.header%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctbackground%3A%20linear-gradient(to%20bottom%2C%20%23f8f8f8%2C%20%23e8e8e8)%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctborder-bottom%3A%201px%20solid%20%23bbb%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctpadding%3A%206px%2010px%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctcursor%3A%20move%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctuser-select%3A%20none%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctdisplay%3A%20flex%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctjustify-content%3A%20space-between%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctalign-items%3A%20center%3B%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct.header-title%20%7B%20font-weight%3A%20600%3B%20color%3A%20%23333%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.close-btn%20%7B%20cursor%3A%20pointer%3B%20color%3A%20%23666%3B%20font-size%3A%200.875rem%3B%20padding%3A%202px%206px%3B%20border-radius%3A%203px%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.close-btn%3Ahover%20%7B%20background%3A%20%23ddd%3B%20color%3A%20%23333%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.hint%20%7B%20font-size%3A%200.6875rem%3B%20color%3A%20%23666%3B%20margin%3A%206px%2010px%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.result%20%7B%20padding%3A%208px%2010px%3B%20border-top%3A%201px%20solid%20%23eee%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.result-label%20%7B%20font-size%3A%200.625rem%3B%20color%3A%20%23666%3B%20text-transform%3A%20uppercase%3B%20margin-bottom%3A%202px%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.text-preview%20%7B%20font-size%3A%200.6875rem%3B%20color%3A%20%23333%3B%20margin-bottom%3A%206px%3B%20word-break%3A%20break-word%3B%20max-height%3A%2040px%3B%20overflow%3A%20hidden%3B%20text-overflow%3A%20ellipsis%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.colors%20%7B%20display%3A%20flex%3B%20gap%3A%208px%3B%20margin%3A%206px%200%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.color-swatch%20%7B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20gap%3A%204px%3B%20font-size%3A%200.6875rem%3B%20font-family%3A%20monospace%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.swatch-box%20%7B%20width%3A%2020px%3B%20height%3A%2020px%3B%20border%3A%201px%20solid%20%23999%3B%20border-radius%3A%203px%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.ratio%20%7B%20font-size%3A%201.5rem%3B%20font-weight%3A%20700%3B%20text-align%3A%20center%3B%20margin%3A%208px%200%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.ratio.pass%20%7B%20color%3A%20%2328a745%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.ratio.fail%20%7B%20color%3A%20%23dc3545%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.level-badge%20%7B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctdisplay%3A%20inline-block%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctpadding%3A%202px%206px%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctborder-radius%3A%203px%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfont-size%3A%200.625rem%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctfont-weight%3A%20700%3B%5Cn%5Ct%5Ct%5Ct%5Ct%5Ctmargin-right%3A%204px%3B%5Cn%5Ct%5Ct%5Ct%5Ct%7D%5Cn%5Ct%5Ct%5Ct%5Ct.level-badge.pass%20%7B%20background%3A%20%2328a745%3B%20color%3A%20%23fff%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.level-badge.fail%20%7B%20background%3A%20%23dc3545%3B%20color%3A%20%23fff%3B%20%7D%5Cn%5Ct%5Ct%5Ct%5Ct.info%20%7B%20font-size%3A%200.625rem%3B%20color%3A%20%23666%3B%20text-align%3A%20center%3B%20margin-top%3A%204px%3B%20%7D%5Cn%5Ct%5Ct%5Ct%3C%2Fstyle%3E%5Cn%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22modal%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22header%22%20id%3D%22header%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cspan%20class%3D%22header-title%22%3EContrast%20Check%3C%2Fspan%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cspan%20class%3D%22close-btn%22%20id%3D%22close-btn%22%3Eclose%20%5Cu2716%3C%2Fspan%3E%5Cn%5Ct%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22hint%22%3EClick%20any%20text%20to%20check%20contrast%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22result%22%20id%3D%22result%22%20style%3D%22display%3Anone%3B%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22result-label%22%3EText%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22text-preview%22%20id%3D%22text-preview%22%3E%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22result-label%22%3EColors%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22colors%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22color-swatch%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22swatch-box%22%20id%3D%22fg-swatch%22%3E%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cspan%20id%3D%22fg-color%22%3E%3C%2Fspan%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22color-swatch%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22swatch-box%22%20id%3D%22bg-swatch%22%3E%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cspan%20id%3D%22bg-color%22%3E%3C%2Fspan%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22result-label%22%3EContrast%20Ratio%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22ratio%22%20id%3D%22ratio%22%3E%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22info%22%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cspan%20class%3D%22level-badge%22%20id%3D%22aa-badge%22%3E%3C%2Fspan%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%5Ct%3Cspan%20class%3D%22level-badge%22%20id%3D%22aaa-badge%22%3E%3C%2Fspan%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%5Ct%3Cdiv%20class%3D%22info%22%20id%3D%22size-info%22%3E%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%5Ct%3C%2Fdiv%3E%5Cn%5Ct%5Ct%27%3Blet%20i%3D%211%2Cr%3D%7Bx%3A0%2Cy%3A0%7D%3Bs.getElementById(%22header%22).addEventListener(%22mousedown%22%2Ct%3D%3E%7Bi%3D%210%2Cr.x%3Dt.clientX-a.offsetLeft%2Cr.y%3Dt.clientY-a.offsetTop%7D)%2Cdocument.addEventListener(%22mousemove%22%2Ct%3D%3E%7Bi%26%26(a.style.left%3Dt.clientX-r.x%2B%22px%22%2Ca.style.top%3Dt.clientY-r.y%2B%22px%22%2Ca.style.right%3D%22auto%22)%7D)%2Cdocument.addEventListener(%22mouseup%22%2C()%3D%3E%7Bi%3D%211%7D)%3Bconst%20l%3Ds.getElementById(%22result%22)%2Cd%3Ds.getElementById(%22text-preview%22)%2Cc%3Ds.getElementById(%22fg-swatch%22)%2Cp%3Ds.getElementById(%22bg-swatch%22)%2Cg%3Ds.getElementById(%22fg-color%22)%2Cm%3Ds.getElementById(%22bg-color%22)%2Cf%3Ds.getElementById(%22ratio%22)%2Cx%3Ds.getElementById(%22aa-badge%22)%2Cb%3Ds.getElementById(%22aaa-badge%22)%2Cv%3Ds.getElementById(%22size-info%22)%3Bs.getElementById(%22close-btn%22).addEventListener(%22click%22%2Ct%3D%3E%7Bt.stopPropagation()%2Ch()%7D)%3Bconst%20u%3Dt%3D%3E%7Bif(a.contains(t.target))return%3Bt.preventDefault()%2Ct.stopPropagation()%3Bconst%20e%3Dt.target%2Cn%3DgetComputedStyle(e)%2Cs%3Dn.color%3Blet%20i%3Dn.backgroundColor%2Cr%3De%3Bfor(%3B%22rgba(0%2C%200%2C%200%2C%200)%22%3D%3D%3Di%7C%7C%22transparent%22%3D%3D%3Di%3B)%7Bif(r%3Dr.parentElement%2C%21r)%7Bi%3D%22rgb(255%2C255%2C255)%22%3Bbreak%7Di%3DgetComputedStyle(r).backgroundColor%7Dconst%20u%3Do(s%2Ci).toFixed(2)%2Ch%3DparseFloat(n.fontSize)%2Cy%3DparseInt(n.fontWeight%2C10)%3E%3D700%2Cw%3Dh%3E%3D18%7C%7Ch%3E%3D14%26%26y%2Ck%3Dw%3Fu%3E%3D3%3Au%3E%3D4.5%2CE%3Dw%3Fu%3E%3D4.5%3Au%3E%3D7%3Bl.style.display%3D%22block%22%2Cd.textContent%3De.textContent.trim().slice(0%2C80)%7C%7Ce.tagName%2Cc.style.background%3Ds%2Cp.style.background%3Di%2Cg.textContent%3Ds%2Cm.textContent%3Di%2Cf.textContent%3Du%2B%22%3A1%22%2Cf.className%3D%22ratio%20%22%2B(k%3F%22pass%22%3A%22fail%22)%2Cx.textContent%3D%22AA%20%22%2B(k%3F%22PASS%22%3A%22FAIL%22)%2Cx.className%3D%22level-badge%20%22%2B(k%3F%22pass%22%3A%22fail%22)%2Cb.textContent%3D%22AAA%20%22%2B(E%3F%22PASS%22%3A%22FAIL%22)%2Cb.className%3D%22level-badge%20%22%2B(E%3F%22pass%22%3A%22fail%22)%2Cv.textContent%3Dw%3F%22Large%20text%20(%5Cu226518pt%20or%20%5Cu226514pt%20bold)%22%3A%22Normal%20text%22%7D%3Bfunction%20h()%7Bdocument.removeEventListener(%22click%22%2Cu%2C%210)%2Cdocument.removeEventListener(%22keydown%22%2Cy%2C%210)%2Ca.remove()%7Dfunction%20y(t)%7B%22Escape%22%3D%3D%3Dt.key%26%26h()%7Ddocument.addEventListener(%22click%22%2Cu%2C%210)%2Cdocument.addEventListener(%22keydown%22%2Cy%2C%210)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnOriginal%20author%3A%20alejandrogiga98%20(MIT%20License)%5CnEnhanced%20by%3A%20pattespatte%5Cn-%20Fixed%20color%20parsing%20for%20hex%20colors%20(%23RGB%2C%20%23RRGGBB)%5Cn-%20Replaced%20alert%20dialogs%20with%20persistent%20Shadow%20DOM%20modal%5Cn-%20Added%20draggable%20UI%20with%20color%20swatches%20and%20WCAG%20badges%5Cn-%20Original%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5Cn%22)%7Dcatch(w)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bw.message)%7D%7D()%3B