opens a popup with an ada checker
javascript:(function(){if(document.getElementById('adaContrastChecker')){document.getElementById('adaContrastChecker').remove();return;}function lum(r,g,b){[r,g,b]=[r,g,b].map(v=>v/255Math.max(0,Math.min(255,Math.round(x)));return"#"+[clamp(r),clamp(g),clamp(b)].map(x=>x.toString(16).padStart(2,'0')).join('');}function rgbToHsl(r,g,b){r/=255;g/=255;b/=255;let max=Math.max(r,g,b),min=Math.min(r,g,b),h=0,s=0,l=(max+min)/2;if(max!=min){let d=max-min;s=l>0.5?d/(2-max-min):d/(max+min);switch(max){case r:h=(g-b)/d+(g<b?6:0);break;case g:h=(b-r)/d+2;break;case b:h=(r-g)/d+4;break;}h/=6;}return[h,s,l];}function hslToRgb(h,s,l){let r,g,b;if(s===0){r=g=b=l;}else{function f(p,q,t){if(t1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p;}let q=l<0.5?l*(1+s):l+s-l*s,p=2*l-q;r=f(p,q,h+1/3);g=f(p,q,h);b=f(p,q,h-1/3);}return[r*255,g*255,b*255];}let d=document.createElement('div');d.id='adaContrastChecker';d.style.cssText='position:fixed;top:30px;right:20px;z-index:9999;background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ccc;padding:15px;width:420px;font-family:sans-serif;font-size:14px;color:#333;box-shadow:0 4px 12px rgba(0,0,0,0.15);border-radius:8px;';const starSVG='';d.innerHTML='<h3 style="margin-top:0;margin-bottom:15px;font-size:18px;color:#000;font-weight:bold">ADA Contrast Checker</h3><button id="closeChecker" style="position:absolute;top:5px;right:10px;background:none;border:none;font-size:24px;cursor:pointer;line-height:1;padding:0;color:#666">×</button><div style="align-items:center;justify-content:space-between;margin-bottom:10px"><div style="flex-grow:1"><label>Foreground: </label> <span id="fgHex">#000000</span></div><button id="inverseBtn" style="background:none;border:none;font-size:20px;cursor:pointer;line-height:1;padding:0;color:#666" title="Swap foreground and background colors">⇅</button></div><div style="align-items:center;justify-content:space-between"><div style="flex-grow:1"><label>Background: </label> <span id="bgHex">#ffffff</span></div></div><br>Lightness: <br><br>Lightness: <br><br><div id="previewBox" style="width:100%;height:50px;line-height:50px;text-align:center;margin-top:10px;border:1px solid #000;font-weight:bold;font-size:24px">Aa</div><div id="graphicPreview" style="width:100%;height:50px;line-height:50px;text-align:center;margin-top:10px;border:1px solid #000;font-weight:bold;font-size:24px"></div><div id="contrastResult" style="font-weight:bold;margin-top:10px">Contrast ratio: </div>';document.body.appendChild(d);document.getElementById('graphicPreview').innerHTML=starSVG;function update(e){let fgColorEl=document.getElementById('fgColor');let bgColorEl=document.getElementById('bgColor');let fgLightEl=document.getElementById('fgLight');let bgLightEl=document.getElementById('bgLight');let contrastResultEl=document.getElementById('contrastResult');if(e&&e.target.id==='fgColor'){let fgRgb=hexToRgb(fgColorEl.value);let fgHsl=rgbToHsl(...fgRgb);fgLightEl.value=fgHsl[2]*100;}if(e&&e.target.id==='bgColor'){let bgRgb=hexToRgb(bgColorEl.value);let bgHsl=rgbToHsl(...bgRgb);bgLightEl.value=bgHsl[2]*100;}if(e&&e.target.id==='fgLight'){let fgHsl=rgbToHsl(...hexToRgb(fgColorEl.value));fgHsl[2]=fgLightEl.value/100;let newRgb=hslToRgb(...fgHsl);fgColorEl.value=rgbToHex(...newRgb);}if(e&&e.target.id==='bgLight'){let bgHsl=rgbToHsl(...hexToRgb(bgColorEl.value));bgHsl[2]=bgLightEl.value/100;let newRgb=hslToRgb(...bgHsl);bgColorEl.value=rgbToHex(...newRgb);}let fgRgb=hexToRgb(fgColorEl.value),bgRgb=hexToRgb(bgColorEl.value);document.getElementById('fgHex').innerText=fgColorEl.value;document.getElementById('bgHex').innerText=bgColorEl.value;document.getElementById('previewBox').style.color=fgColorEl.value;document.getElementById('previewBox').style.backgroundColor=bgColorEl.value;document.getElementById('graphicPreview').style.color=fgColorEl.value;document.getElementById('graphicPreview').style.backgroundColor=bgColorEl.value;let r=contrast(fgRgb,bgRgb),res='Contrast ratio: '+r.toFixed(2)+'\n';let graphicalPass=r>=3?'<span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span>':'<span style="background-color:#f8d7da;color:#721c24;padding:2px 5px;border-radius:3px">FAIL</span>';if(r>=7){res+='<br>AAA Large/Normal: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>AA Large: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>AA Normal: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>Graphical Objects: '+graphicalPass;}else if(r>=4.5){res+='<br>AAA Large: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>AA Large: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>AA Normal: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>AAA Normal: <span style="background-color:#f8d7da;color:#721c24;padding:2px 5px;border-radius:3px">FAIL</span><br>Graphical Objects: '+graphicalPass;}else if(r>=3){res+='<br>AA Large: <span style="background-color:#d4edda;color:#155724;padding:2px 5px;border-radius:3px">PASS</span><br>AA Normal: <span style="background-color:#f8d7da;color:#721c24;padding:2px 5px;border-radius:3px">FAIL</span><br>AAA Large/Normal: <span style="background-color:#f8d7da;color:#721c24;padding:2px 5px;border-radius:3px">FAIL</span><br>Graphical Objects: '+graphicalPass;}else {res+='<br>AA/AAA: <span style="background-color:#f8d7da;color:#721c24;padding:2px 5px;border-radius:3px">FAIL</span><br>Graphical Objects: '+graphicalPass;}contrastResultEl.innerHTML=res;}['fgColor','bgColor','fgLight','bgLight'].forEach(id=>document.getElementById(id).addEventListener('input',update));document.getElementById('closeChecker').addEventListener('click',()=>d.remove());document.getElementById('inverseBtn').addEventListener('click',function(){let fgColorEl=document.getElementById('fgColor');let bgColorEl=document.getElementById('bgColor');let currentFg=fgColorEl.value;let currentBg=bgColorEl.value;fgColorEl.value=currentBg;bgColorEl.value=currentFg;update();});update({});})();