{
  "id": 19043395,
  "title": "Show DEV: a single-file WCAG contrast checker, generated in one shot and verified by execution",
  "url": "https://urgent.news/2026/11/08/show-dev-a-single-file-wcag-contrast-checker-generated-in-one-shot",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-08T23:19:47.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/mercerk17/show-dev-a-single-file-wcag-contrast-checker-generated-in-one-shot-and-verified-by-execution-3147"
  },
  "original_language": "en",
  "account": "The user requested a WCAG color contrast checker as a single self-contained HTML file. The generated code includes inline CSS and JavaScript, with no external libraries. The HTML document begins with the doctype declaration and specifies the language as English. The head section contains necessary meta tags, including character encoding and viewport settings. The title of the page is \"WCAG Contrast Checker.\"\n\nThe CSS styles define the layout and appearance of the page elements. The body has a white background, while the main content area is given a border, padding, and centered layout. The h1 heading has a slightly smaller font size than the rest of the text. The input fields for foreground and background colors are styled with a border, padding, and margin. The preview area for the color combinations is also styled with a border, padding, and minimum height.\n\nThe JavaScript code calculates the contrast ratio between the two input colors and updates the text preview with the calculated ratio. It also determines the pass/fail status based on the contrast ratio and displays appropriate badges. The file includes four preset color pairs that can be selected by clicking on buttons. The entire code is kept under 200 lines to ensure compactness.\n\nTo use the WCAG contrast checker, the file should be saved as \"contrast.html\" and then opened in a web browser. The page will display a text input for foreground and background colors, a live preview of the colors, the calculated contrast ratio, and pass/fail badges for different accessibility levels. The preset color pairs can be selected to quickly load predefined color combinations for testing.",
  "summary": "I do marketing for HelloAI ( https://tryhello.app ), the app in this test. Insider test, not a neutral review. My earlier posts here were documents it wrote; this time I asked for a runnable thing: a WCAG color contrast checker as one self-contained HTML file. It produced the whole file in a single response. Below is that exact file, unchanged, plus everything I did to check it before publishing.…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}