Contrast Checker

WCAG Level Analyzer Bookmarklet
Introduction

This bookmarklet lets you pick colours from a webpage and check their contrast ratio. It's based on the Web Content Accessibility Guidelines. (More details on MDN.)
By RÉMINO
Installation

Drag this button link to your bookmarks (or click to try it on this page now):
Contrast Checker
Alternatively, add a new bookmark yourself, edit it, then paste this URL in it:
javascript:void(function()%7B%22use%20strict%22;%7Bconst%20t=()=%3E%7Bwindow.contrastChecker.remove(),window.contrastChecker=null%7D;if(window.contrastChecker)t();else%7Bconst%20a=document.createElement(%22div%22),n=(window.contrastChecker=a).attachShadow(%7Bmode:%22closed%22%7D),s=document.createElement(%22form%22),r=document.createElement(%22style%22);r.textContent=':host%7Ball:initial;--bg-rgb:255%20255%20255;--fg-rgb:0%200%200;--font-size:16px%7D%5Bdisabled%5D%7Bopacity:.6%7D%5Bname=copy%5D%7Bbox-sizing:border-box;flex:1%200%208em;width:100%25%7D%5Btype=submit%5D%7Bfont-weight:700%7D.aa,.aaa,.fail%7Bcolor:#fff%7D.aa,.aaa%7Bcolor:green%7D.aa:after,.aaa:after%7Bcontent:%22%E2%9C%85%22;margin-inline-start:.25em%7D.fail%7Bcolor:#c00%7D.fail:after%7Bcontent:%22%E2%9D%8C%22;margin-inline-start:.25em%7D.result%20output%7Bbox-sizing:border-box;font-weight:700;text-align:right;width:6em%7D.vert%7Balign-items:stretch;flex-flow:column%20nowrap%7Dbutton,input%7Bfont-size:1em%7Dfieldset,form,header,label,menu,nav%7Balign-items:center;display:flex;flex-flow:row%20wrap;gap:.4em;justify-content:space-between%7Dform%7Balign-items:stretch;-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em);background:rgb(var(--bg-rgb)/80%25);bottom:1em;box-shadow:0%200%201em%20rgba(var(--fg-rgb)/40%25);color:rgb(var(--fg-rgb));display:flex;flex-flow:column%20nowrap;font-family:system-ui,sans-serif;font-size:var(--font-size);inline-size:16em;justify-content:center;left:1em;margin:0;min-block-size:10em;padding:1em;position:fixed;z-index:2147483647%7Dheader%7Bcursor:move;user-select:none%7Dh1%7Bfont-size:1em%7Dh1,menu%7Bmargin:0%7Dmenu%7Bflex:1%200;justify-content:center;list-style:none;padding:0%7D';class%20l%20extends%20HTMLElement%7Bget%20alphaEnabled()%7Breturn%20this.hasAttribute(%22alpha%22)%7Dget%20label()%7Breturn%20this.getAttribute(%22label%22)%7C%7C%22Colour%22%7Dget%20colorAttr()%7Breturn%20this.getAttribute(%22color%22)%7C%7C%22#000000%22%7Dget%20alpha()%7Breturn%20this.alphaEnabled?this.querySelector('input%5Bname=%22alpha%22%5D').value:1%7Dget%20color()%7Breturn%20this.querySelector('input%5Bname=%22color%22%5D').value%7Dset%20color(e)%7Bthis.querySelector('input%5Bname=%22color%22%5D').value=e%7DconnectedCallback()%7Bthis.innerHTML=%60%3Cfieldset%3E%3Clegend%3E$%7Bthis.label%7D%3C/legend%3E%3Cinput%20name=color%20type=color%20value=#000000%3E%3Clabel%3E%3Cspan%3EAlpha%3C/span%3E%3Cinput%20name=alpha%20type=number%20min=0%20max=1%20step=0.01%20value=1%3E%3C/label%3E%3Cbutton%20name=copy%3ECopy%3C/button%3E%3C/fieldset%3E%60,this.color=this.colorAttr;const%20t=this.querySelector('%5Bname=%22copy%22%5D');t.textContent=this.color,t.addEventListener(%22click%22,async%20e=%3E%7Be.preventDefault(),e.stopPropagation(),await%20navigator.clipboard.writeText(this.color)%7D),this.alphaEnabled%7C%7C(this.querySelector('%5Bname=%22alpha%22%5D').disabled=!0),this.querySelector('%5Bname=%22alpha%22%5D').addEventListener(%22input%22,()=%3E%7Bthis.dispatchEvent(new%20CustomEvent(%22input%22,%7Bdetail:%7Balpha:this.alpha,color:this.color%7D%7D))%7D),this.querySelector('%5Bname=%22color%22%5D').addEventListener(%22input%22,e=%3E%7Bt.textContent=e.currentTarget.value,this.dispatchEvent(new%20CustomEvent(%22input%22,%7Bdetail:%7Balpha:this.alpha,color:this.color%7D%7D))%7D)%7D%7DcustomElements.get(%22color-picker%22)%7C%7CcustomElements.define(%22color-picker%22,l),s.innerHTML='%3Cheader%3E%3Ch1%3EContrast%20Checker%3C/h1%3E%3Cbutton%20aria-label=Close%20type=submit%3E×%3C/button%3E%3C/header%3E%3Ccolor-picker%20name=fg%20label=Foreground%20color=#000000%20alpha%3E%3C/color-picker%3E%3Ccolor-picker%20name=bg%20label=Background%20color=#ffffff%3E%3C/color-picker%3E%3Cfieldset%20class=%22result%20vert%22%3E%3Clegend%3EWCAG%3C/legend%3E%3Clabel%3E%3Cspan%3EContrast%20Ratio%3C/span%3E%20%3Coutput%20name=contrast%20readonly%3E%3C/label%3E%20%3Clabel%3E%3Cspan%3ENormal%20Text%3C/span%3E%20%3Coutput%20name=wcagnt%20readonly%3E%3C/label%3E%20%3Clabel%3E%3Cspan%3ELarge%20Text%3C/span%3E%20%3Coutput%20name=wcaglt%20readonly%3E%3C/label%3E%20%3Clabel%3E%3Cspan%3EUI%20Objects%3C/span%3E%20%3Coutput%20name=wcagui%20readonly%3E%3C/label%3E%3C/fieldset%3E%3Cnav%3E%3Cmenu%3E%3Cli%3E%3Ca%20href=https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG%20target=_blank%3EDetails%20about%20WCAG%20on%20MDN%3C/a%3E%3C/li%3E%3Cli%3EBy%20%3Ca%20href=https://remino.net%20target=_blank%3ER%C3%89MINO%3C/a%3E%3C/menu%3E%3C/nav%3E',s.addEventListener(%22submit%22,e=%3E%7Be.preventDefault(),e.stopPropagation(),t()%7D);const%20c=e=%3E%7Breturn%7Br:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16)%7D%7D,u=(e,t,a=1)=%3E%7Be=c(e),t=c(t);return%7Br:e.r*a+t.r*(1-a),g:e.g*a+t.g*(1-a),b:e.b*a+t.b*(1-a)%7D%7D,p=e=%3E%7Be=%5Be.r,e.g,e.b%5D.map(e=%3E(e/=255)%3C=.03928?e/12.92:((e+.055)/1.055)**2.4);return.2126*e%5B0%5D+.7152*e%5B1%5D+.0722*e%5B2%5D%7D;var%20e=()=%3E%7Bvar%20e=s.querySelector('color-picker%5Bname=%22fg%22%5D'),t=s.querySelector('color-picker%5Bname=%22bg%22%5D');const%20a=s.querySelector('output%5Bname=%22contrast%22%5D'),n=s.querySelector('output%5Bname=%22wcagnt%22%5D'),r=s.querySelector('output%5Bname=%22wcaglt%22%5D'),o=s.querySelector('output%5Bname=%22wcagui%22%5D');var%20l=e.color,e=e.alpha;const%20i=((e,t,a=1)=%3E%7Be=u(e,t,a),a=p(e)+.05,e=p(c(t))+.05;return%20e%3Ca?a/e:e/a%7D)(l,t.color,e);a.value=parseFloat(i.toFixed(2))+%22:1%22,n.value=7%3C=(l=i)?%22AAA%22:4.5%3C=l?%22AA%22:%22Fail%22,r.value=4.5%3C=(t=i)?%22AAA%22:3%3C=t?%22AA%22:%22Fail%22,o.value=3%3C=i?%22AA%22:%22Fail%22,%5Bn,r,o%5D.forEach(e=%3E%7Bconst%20t=e%5B%22value%22%5D;e.classList.remove(%22fail%22,%22aa%22,%22aaa%22),e.classList.add(t.toLowerCase())%7D)%7D;s.addEventListener(%22input%22,e);%7Bvar%20o=s;let%20a,n=0,r=!1;o.querySelector(%22header%22).addEventListener(%22pointerdown%22,e=%3E%7Ba=e.clientX-o.offsetLeft,n=e.clientY-o.offsetTop,r=!0%7D),document.addEventListener(%22pointermove%22,e=%3E%7Bvar%20t;r&&(e.preventDefault(),e.stopPropagation(),t=e.clientX-a,e=e.clientY-n,o.style.setProperty(%22left%22,t+%22px%22),o.style.setProperty(%22top%22,e+%22px%22),o.style.setProperty(%22bottom%22,%22auto%22))%7D),document.addEventListener(%22pointerup%22,()=%3E%7Br=!1%7D)%7Dn.appendChild(r),n.appendChild(s),document.body.appendChild(a),e()%7D%7D%7D())