Sprawdzanie kontrastu tekstu

<main class="contrast"><section><h1>Sprawdź<br>kontrast.</h1><div class="field"><label for="contrast-preset">Zestaw kolorów</label><select id="contrast-preset"><option value="navy">Granat na jasnym tle</option><option value="low">Jasnoszary na białym</option><option value="black">Czarny na białym</option><option value="forest">Biały na leśnej zieleni</option></select></div><div class="two"><div><label for="foreground">Tekst</label><input id="foreground" type="color" value="#243762"></div><div><label for="background">Tło</label><input id="background" type="color" value="#f2f4fc"></div></div><p class="note">Ocena dotyczy zwykłego tekstu: AA ≥ 4,5; AAA ≥ 7.</p></section><section id="contrast-sample"><p>Próbka tekstu</p><h2>Tekst<br>próbny.</h2><output id="contrast-ratio">10,66 : 1</output><p id="contrast-rating" role="status">AAA: spełnia wymagania</p><code id="color-pair"></code></section></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#e3e7f1;color:#243762;--accent:#334e8e}.contrast{display:grid;grid-template-columns:1fr 1fr;gap:40px}.contrast h1{font-family:Georgia,serif}.contrast .two{gap:14px}#contrast-sample{padding:28px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #7382a3;min-height:310px}#contrast-sample h2{font-size:45px;font-weight:500;line-height:1}#contrast-ratio{font:35px ui-monospace,monospace}#contrast-rating{font-size:14px;margin-top:16px}#color-pair{font-size:12px;overflow-wrap:anywhere}@media(max-width:560px){.contrast{grid-template-columns:1fr;gap:24px}.contrast .two{grid-template-columns:1fr 1fr}#contrast-sample{min-height:260px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const luminance=hex=>{const c=[1,3,5].map(i=>parseInt(hex.slice(i,i+2),16)/255).map(n=>n<=.04045?n/12.92:((n+.055)/1.055)**2.4);return c[0]*.2126+c[1]*.7152+c[2]*.0722};const update=()=>{const f=q('#foreground').value,b=q('#background').value,l=[luminance(f),luminance(b)].sort((a,b)=>b-a),ratio=(l[0]+.05)/(l[1]+.05);q('#contrast-sample').style.color=f;q('#contrast-sample').style.background=b;q('#contrast-ratio').textContent=ratio.toFixed(2).replace('.',',')+' : 1';q('#contrast-rating').textContent=ratio>=7?'AAA: spełnia wymagania':ratio>=4.5?'AA: spełnia wymagania':'Za niski kontrast dla zwykłego tekstu';q('#color-pair').textContent=f.toUpperCase()+' / '+b.toUpperCase()};const presets={navy:['#243762','#f2f4fc'],low:['#bcbcbc','#ffffff'],black:['#000000','#ffffff'],forest:['#ffffff','#234f39']};q('#contrast-preset').onchange=()=>{const pair=presets[q('#contrast-preset').value];q('#foreground').value=pair[0];q('#background').value=pair[1];update()};q('#foreground').oninput=update;q('#background').oninput=update;update();})();