Contrast

The exact prompt

A. BUILD TARGET
Create exactly one dependency-free HTML5 file named index.html with inline CSS and JavaScript. Use no frameworks, libraries, web fonts, external requests, images, media, or build step. The document title is "CONTRAST - WCAG Color Accessibility Laboratory" and the html language is English. Build a polished, responsive color accessibility tool called CONTRAST. It must have exactly one h1 and semantic header, nav, main, and footer elements. Include a skip link and three anchor navigation links named Laboratory, Palettes, and Guide. The page is allowed to scroll; do not lock it to one viewport. Keep the entire file under 90KB. No visible copy may contain an em dash. Never call console methods.

B. VISUAL DIRECTION
Use a clean split composition with a restrained neutral cool-gray interface, crisp borders, modest 8 to 14px corner radii, and a single electric-blue accent #3478f6. Use system sans-serif fonts with monospace numerals and hex values. The top header contains a simple CSS geometric brand mark, the CONTRAST wordmark, and a compact WCAG LAB note. The introduction pairs the single h1 "Readability, measured." with a short explanation of WCAG 2.2 testing. The main workspace is a bordered, lightly shadowed split panel: color controls and results on the left, a large live sample on the right. Below it are curated palettes and a concise threshold guide. The aesthetic is precise, practical, and calm, not a dark neon dashboard. Use green and red only as semantic pass and fail support colors, always paired with explicit symbols and words. All interface labels, helper text, controls, and focus indicators must meet readable contrast.

C. COLOR CONTROLS
Start with foreground #17233C and background #F5F7FB. For each color provide a native input type=color, a labeled hex text field without a required leading hash, and red, green, and blue range sliders from 0 to 255 with visible numeric outputs. Hex input accepts 3 or 6 digits with an optional #, normalizes valid values to uppercase six-digit form, and updates every view immediately. Malformed values set aria-invalid=true and show an inline message "Use 3 or 6 hex digits, for example #3478F6." without throwing or replacing the last valid color. Valid edits clear the error. Color pickers and sliders update state, both hex values, all slider outputs, palette selection, sample colors, ratio, and WCAG verdicts on input. Every input has a persistent accessible label.

D. REAL WCAG RESULTS
Implement sRGB relative luminance exactly: divide each 8-bit channel by 255, use channel/12.92 when channel <= 0.04045, otherwise ((channel + 0.055)/1.055)^2.4, then combine channels with coefficients 0.2126, 0.7152, and 0.0722. Contrast is (lighter luminance + 0.05)/(darker luminance + 0.05). Display the ratio rounded to two decimals followed by ": 1" and a concise text summary. Show four separate labeled results: Normal AA at 4.5:1, Normal AAA at 7:1, Large AA at 3:1, and Large AAA at 4.5:1. Each result displays either "✓ Pass" or "× Fail" plus the numeric threshold, so meaning never relies on color alone. A visually hidden polite atomic live region announces the changed ratio and normal and large AA outcomes.

E. WORKING ACTIONS
Provide working Swap, Randomize, Reset, Copy Palette, and Suggest accessible foreground buttons. Swap reverses the pair. Randomize generates both colors locally using crypto.getRandomValues with a Math.random fallback. Reset restores the default pair and original sample note. Copy Palette copies foreground, background, and formatted ratio using navigator.clipboard in secure contexts, with a textarea and document.execCommand fallback and visible success or blocked feedback. Handle clipboard rejection without uncaught errors. Suggest accessible foreground leaves a passing pair unchanged with clear feedback. For a failing pair, search nearby HSL lightness and nearby saturation candidates at the original hue, choose the passing candidate with the smallest RGB distance, apply it, and announce the old value, new value, and resulting ratio. The suggestion must reach at least 4.5:1 for normal text AA. Every action uses a visible polite status region.

F. LIVE SAMPLE AND CURATED PALETTES
The sample surface uses the chosen background while all heading, body, kicker, button, and card content use the chosen foreground. Include the heading "Design for every reader.", explanatory body copy, a bordered card titled "Clarity is a feature", and a working sample button. The sample button uses foreground as fill and background as text, swaps those on hover, and when clicked gives clear confirmation feedback. Show the active hex pair above the preview. Add four functional curated palette buttons with two swatches, name, ratio metadata, and aria-pressed state: Ink & Paper #17233C on #F5F7FB, Forest Mist #173F35 on #EFF7F2, Midnight Sky #F4F7FF on #172554, and Warm Graphite #FFF7ED on #292524. Applying a palette updates all controls and results immediately. Custom edits clear the selected palette state.

G. GUIDE AND RESPONSIVE BEHAVIOR
Include a guide explaining that ratios run from 1:1 to 21:1 and that large text is at least 24px or 18.66px bold. Explain Normal AA 4.5:1, Normal AAA 7:1, and Large AA 3:1 in three compact items. At desktop the workspace uses two columns and curated palettes use four columns. At 900px the workspace stacks and palettes become two columns. At 680px the introduction and guide stack, spacing tightens, and the threshold guide becomes one column. At 400px action buttons wrap cleanly and palettes become one column. Prevent horizontal overflow down to 320px. Navigation stays usable, touch targets remain generous, and the sample remains readable without clipping.

H. ACCESSIBILITY, MOTION, AND TELEMETRY
Use native buttons and inputs, logical tab order, a visible 3px electric-blue :focus-visible outline, labeled fieldsets, and aria-live="polite" for results and action feedback. Do not communicate verdicts by color alone. Respect prefers-reduced-motion by removing transitions and smooth scrolling and by stopping the telemetry animation loop in that mode. At script start initialize window.__DEMO__ = { name: 'contrast', ready: false, frames: 0, effects: ['live-wcag-contrast', 'accessible-color-suggestion', 'synchronized-color-controls'], errors: [] }. Install a window error listener that appends messages to errors. In normal motion mode run a requestAnimationFrame loop that increments frames without touching layout. Set ready=true inside a nested requestAnimationFrame after the first paint. Keep errors empty during normal use, malformed input, clipboard rejection, and all controls.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".

Acceptance criteria (14)

1. After load and two animation frames, window.__DEMO__.ready is true; after 1200ms in normal motion mode frames is at least 20, errors is empty, and the document has exactly one h1 plus semantic header, nav, main, and footer elements.
2. Setting foreground to #777777 and background to #FFFFFF through the hex inputs displays 4.48, Normal AA as × Fail, Large AA as ✓ Pass, and Normal AAA and Large AAA as × Fail.
3. With foreground #777777 on background #FFFFFF, activating Suggest accessible foreground applies a valid six-digit foreground with measured contrast >= 4.5, updates all controls and sample colors, and displays the new hex and ratio in the feedback.
4. Entering malformed hex sets aria-invalid and inline error text without throwing; Swap, Randomize, Reset, Copy Palette, all four palettes, RGB sliders, native color inputs, and the sample action each produce their documented update at desktop and mobile widths with no horizontal overflow.
5. window.__DEMO__.ready becomes true within 5s
6. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
7. window.__DEMO__.errors is empty
8. zero console errors and zero page errors
9. zero failed network requests
10. exactly one <h1> with non-empty text
11. header, main, footer landmarks present
12. no horizontal overflow at 390 / 768 / 1440 widths
13. no horizontal overflow after 2s of animation
14. prefers-reduced-motion: reduce leaves the page usable and errors empty