Under the Hood: The Architecture of WCAG Color Contrast Checker
Contrast APIs that screenshot a URL upload the page. This checker takes two hex colors, converts to sRGB, computes relative luminance per WCAG 2, and reports the ratio against AA 4.5:1 and AAA 7:1. All math is local. No design file is stored.
Memory Allocation & Browser Threading Mechanics
Two strings and six numbers. Recalculation is synchronous on input. There is no canvas except the live sample text. Main thread cost is negligible.
Algorithmic Deep-Dive: Code Snippet & Logical Analysis
function luminance(r, g, b) {
const lin = [r, g, b].map((c) => {
const s = c / 255;
return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
});
return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
}
const ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);The 0.05 offset is specified by WCAG. Hex is parsed to 8-bit channels. Invalid hex falls back through a normalizer so the color input does not crash. Sample text uses the pair as CSS color/background for a visual check next to the numeric ratio.
The Local Storage Sandbox & Volatile Data Pipelines
No persistence. Hex strings live in useState. Leaving the page drops them.
Verifying True Privacy: How to Audit Your Browser's Network Tab
F12, Network, clear, change colors. Zero color-API calls. The ratio is CPU, not a contrast SaaS.