HTML
CSS
JS
Result
AAA for large text, AA for normal text
AA for large text
html { color-scheme:light dark; background-color: canvas; color:canvastext } body { max-width:70ch; padding:2ch; margin:auto; font-size:14pt; } table{ font-size:13pt; }
const aaa = document.getElementById('AAA'); const aa = document.getElementById('AA'); // Code adapted from https://stackoverflow.com/a/9733420 const RED = 0.2126; const GREEN = 0.7152; const BLUE = 0.0722; const GAMMA = 2.4; function luminance(r, g, b) { var a = [r, g, b].map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA); }); return a[0] * RED + a[1] * GREEN + a[2] * BLUE; } function contrast(rgb1, rgb2) { var lum1 = luminance(...rgb1); var lum2 = luminance(...rgb2); var brightest = Math.max(lum1, lum2); var darkest = Math.min(lum1, lum2); return (brightest + 0.05) / (darkest + 0.05); } for (let b = 0; b < 255; b += 1) { for (let g = 0; g < 255; g += 1) { for (let r = 0; r < 255; r += 1) { let white = contrast([255, 255, 255], [r, g, b]); let black = contrast([0, 0, 0], [r, g, b]); if(white > 3 && black > 3 && Math.abs(white-black) > 3.99999) { aa.insertAdjacentHTML('beforeend',`
${'rgb(59, 85, 161)' == `rgb(${r}, ${g}, ${b})` ? '⭐' : ''}
rgb(${r}, ${g}, ${b})
${white}
${black}
`); } if(white > 4.5 && black > 4.5 && Math.abs(white-black) < 0.000005) { aaa.insertAdjacentHTML('beforeend',`
${Math.abs(white-black) < 0.000001 ? '⭐' : ''}
rgb(${r}, ${g}, ${b})
${white}
${black}
`); } } } } window.parent.postMessage({ 'msg': 'done' }, "*");