WCAG Contrast Checker

Ensure your document colors meet accessibility standards (enter two hex codes separated by a space).

JavaScript is required for this interactive tool.Static Reference / Engine Logic:const colors = input.value.trim().split(/\s+/); if(colors.length !== 2) { output.textContent = "Please enter two hex colors separated by a space (e.g. #FFFFFF #000000)."; return; } function getLuminance(hex) { const rgb = parseInt(hex.replace('#',''), 16); const r = (rgb >> 16) & 0xff; const g = (rgb >> 8) & 0xff; const b = (rgb >> 0) & 0xff; const [rS, gS, bS] = [r/255, g/255, b/255].map(c => { return c <= 0.03928 ? c / 12.92 : Math.pow(((c + 0.055) / 1.055), 2.4); }); return 0.2126 * rS + 0.7152 * gS + 0.0722 * bS; } try { const l1 = getLuminance(colors[0]); const l2 = getLuminance(colors[1]); const lighter = Math.max(l1, l2); const darker = Math.min(l1, l2); const ratio = (lighter + 0.05) / (darker + 0.05); let res = `Contrast Ratio: ${ratio.toFixed(2)}:1\n\n`; res += ratio >= 4.5 ? "✅ Passes WCAG AA for normal text\n" : "❌ Fails WCAG AA for normal text\n"; res += ratio >= 3.0 ? "✅ Passes WCAG AA for large text\n" : "❌ Fails WCAG AA for large text\n"; res += ratio >= 7.0 ? "✅ Passes WCAG AAA for normal text\n" : "❌ Fails WCAG AAA for normal text\n"; output.textContent = res; } catch(e) { output.textContent = "Invalid hex code format."; }

How it works

This tool runs entirely in your browser using vanilla JavaScript. Data is not sent to any server. Mechanically, it processes the input string or array buffer using native web APIs (like WebCrypto, TextEncoder, or regex matching).

Common Use Cases

Debugging broken files.
Verifying data integrity.
Extracting raw data structures.

WCAG Contrast Checker

How it works

Common Use Cases

Related Tools