43:["$","title",null,{"children":"Text contrast is a property of a pair | voltwake | Observable"}] 4b:T93f,# Text contrast is a property of a pair A palette can contain attractive colors while producing unreadable text in a particular combination. This small notebook checks one foreground/background pair and keeps the calculation beside the example. It uses opaque, six-digit sRGB colors; it does not evaluate an entire interface. Disclosure: I build Curio, a design library for AI. This is an original calculator and explanation prepared with AI assistance. It contains no extracted paid style, private project data, or API credentials. ## Try a pair, then inspect the assumption Use the two color inputs below. The sample sentence changes with the pair. The numerical result compares the unrounded contrast ratio with a 4.5:1 ordinary-text threshold, then rounds the number for display. Rounding a failing value up to 4.50 must not turn it into a pass. Black against white gives 21:1. Identical colors give 1:1. Those make useful checks that the calculation has not accidentally compared two foregrounds or mixed gamma-encoded channels with linear luminance. ## What this checks The calculation follows the relative-luminance and contrast-ratio definitions in [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It linearizes the three sRGB channels, computes luminance, then compares the lighter and darker colors. The 4.5:1 criterion has defined exceptions; read the standard before applying it to a particular text role. Transparency, gradients, images, component states, focus indicators, reading order, labels and interaction all require further review. A passing result here is evidence about this opaque color pair, not a claim that a page conforms to WCAG. The calculator itself performs browser-side arithmetic and makes no network requests. ## Use roles in a design handoff Label a token as body text, supporting text, or action text, then record its intended background. Avoid reviewing an isolated hex code without that context. Repeat the check for the actual rendered states rather than assuming that a shared palette guarantees consistent results. [Curio](https://designbycurio.com/) packages design decisions into machine-readable style specifications. This worksheet is also useful with your own tokens: choose a pair, inspect its assumptions, and review the real interface afterward. _Checked against public product information on 5 November 2026._ 4c:T6fc,(() => { function luminance(hex) { if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error('Use an opaque six-digit sRGB color.'); const rgb = [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16) / 255); const linear = rgb.map(c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4); return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2]; } function contrast(a, b) { const x = luminance(a), y = luminance(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); } // UI starts here const panel = document.createElement('section'); panel.style.cssText = 'font:16px/1.5 system-ui;max-width:42rem;padding:20px;border:1px solid #94a3b8;border-radius:8px'; panel.innerHTML = '

Check an opaque text color pair

Text color Background color

A sentence at the selected color pair.

Opaque sRGB pairs only. A contrast ratio alone does not certify an accessible interface.

'; const [fg, bg] = panel.querySelectorAll('input'); const sample = panel.querySelector('.sample'); const result = panel.querySelector('.result'); function render() { const value = contrast(fg.value, bg.value); sample.style.color = fg.value; sample.style.backgroundColor = bg.value; result.textContent = `Contrast: ${value.toFixed(2)}:1. Ordinary-text 4.5:1 threshold: ${value >= 4.5 ? 'met' : 'not met'}.`; } fg.addEventListener('input', render); bg.addEventListener('input', render); render(); return panel; })() 4d:[] 47:{"id":"e3671f97d294447c","slug":"text-contrast-is-a-property-of-a-pair","title":"Text contrast is a property of a pair","thumbnail":"394a43cec15030c0482a6d6b84879bc39d11d3fccbde72354df695aa39bc1b93","access_level":"public","create_time":"$D2026-11-05T10:46:47.600Z","update_time":"$D2026-11-05T11:06:42.772Z","view_time":null,"first_public_time":"$D2026-11-05T11:03:44.902Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"137903abcf5ffa21","login":"voltwake","name":"voltwake","avatar_url":"https://avatars-next.observableusercontent.com/392b5c5e6f983455666e9c49212df8875382f71bd3c57b46d96bc4a81249badc","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":7,"publish_version":7,"role":null,"authored":false,"authors":[{"type":"individual","id":"47e6128fd0c94645","login":"voltwake","name":"voltwake","avatar_url":"https://avatars-next.observableusercontent.com/392b5c5e6f983455666e9c49212df8875382f71bd3c57b46d96bc4a81249badc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"137903abcf5ffa21","login":"voltwake","name":"voltwake","avatar_url":"https://avatars-next.observableusercontent.com/392b5c5e6f983455666e9c49212df8875382f71bd3c57b46d96bc4a81249badc","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Text contrast is a property of a pair","cells":[{"id":1,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 42:null