The latest articles on DEV Community by Oldlee (@laoleedesign). https://dev.to/laoleedesign https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4178208%2F3f55d89b-564b-4d00-a865-d2cca4b0689c.png https://dev.to/laoleedesign en Oldlee Sat, 31 Oct 2026 08:22:26 +0000 https://dev.to/laoleedesign/i-built-an-accessibility-tool-that-haunts-your-designs-with-kiro-for-kiroween-2026-2bab https://dev.to/laoleedesign/i-built-an-accessibility-tool-that-haunts-your-designs-with-kiro-for-kiroween-2026-2bab <p><em>This post is written as part of the Kiroween 2026 hackathon.</em></p> <p>I'm Oldlee, a packaging and product designer in Malaysia. For years I've shipped contact-lens boxes, retail walls and landing pages, and one bug keeps coming back: text nobody can read. Pastel on pastel. Light grey on white. White on mint. Designers call it "ghost text". So for Kiroween I built <strong>Ghostlight</strong>, a tool that finds it in any screenshot and exorcises it.</p> <h2> What it does </h2> <ul> <li> <strong>Drop a screenshot or packaging proof.</strong> A "ghost light" sweeps it and raises a ghost wherever text falls below the WCAG contrast line.</li> <li> <strong>Exorcise</strong> repaints each ghost with the nearest passing colour, changing only OKLCH lightness, so the hue and the brand stay.</li> <li> <strong>Possession</strong> re-scans the image the way people with colour-vision deficiency or low vision see it.</li> <li> <strong>Séance palette</strong> checks every text/background pair and exports CSS variables.</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fje2gxc6kutnb4iiu2l44.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fje2gxc6kutnb4iiu2l44.png" alt="Ghostlight accessibility tool highlighting ghost text on packaging" width="800" height="385"></a></p> <p>Live demo: <a href="https://old.lat/ghostlight/" rel="noopener noreferrer">https://old.lat/ghostlight/</a><br> Code: <a href="https://github.com/Oldleeo/ghostlight" rel="noopener noreferrer">https://github.com/Oldleeo/ghostlight</a></p> <h2> How Kiro changed the way I built it </h2> <p>I used Kiro CLI on a remote Linux box. I'm a designer first, so my usual way of coding with AI is: describe, generate, fix, repeat. Kiro pushed me to write steering docs before any code.</p> <p>The line that mattered most was one sentence in <code>tech.md</code>: <strong>ratios are floored, never rounded up.</strong> A 4.497 is a fail. Kiro carried that one rule into the requirements, the design, the code and a property-based test without me repeating it once.</p> <p>The spec was the second surprise. From a one-paragraph brief Kiro wrote numbered requirements, a design with correctness properties, and a task plan. Then real screenshots broke it: gradients and rounded box corners were flagged as ghosts. Instead of patching, I revised the spec twice (text-likeness, anti-aliasing core, "glyphs cross rows and columns, corners don't") and let Kiro re-implement against it. The landing-page sample went from 24 flagged places, many of them box edges, to 16 places that are all real text.</p> <p>I also set up two custom agents: <strong>ghost-smith</strong> builds only from <code>tasks.md</code>, and <strong>ghost-auditor</strong> is read-only and runs Ghostlight's engine against Ghostlight's own UI. Every pair passes. An accessibility tool that fails its own audit would be a bad joke.</p> <p>Property-based tests caught a bug unit tests didn't: exorcising white text on a mint button painted a black bar on the white label next to it. Now there's a property for that.</p> <h2> What's next </h2> <p>Font-size awareness, a Figma plugin, and batch scans of whole design systems.</p> <p>If you design anything with text on it, try a screenshot on Ghostlight and see how many ghosts you've been living with.</p> kiro a11y webdev design