Skip to main content
Elizabeth Stein
DevTools ArsenalOpen to workHomeWorkAboutContact

Case study

devtools2024

Precision Contrast Control

Cinematic-grade professional accessibility suite for designers and developers. Real-time WCAG 2.1 (AA/AAA) and APCA contrast analysis, AI-driven smart color suggestions, color blindness simulation (Protanopia, Deuteranopia, and more), semantic HTML structure analyzer, keyboard navigation checker, form accessibility validator, and image alt-text auditor.

Building the tools that build the tools

Field notes

Role

Creator

Read order

Evidence first, then constraint → build → proof. Use the chapter rail to jump sections; orbit to adjacent work from the bottom of the case study.

DevTools Arsenal·✦II-Class Star
●LIVE
View on GitHub
View Live SiteSource Code

Evidence

Interface & evidence

A real surface area—not a mock. Scroll the story below for constraint, build, and outcome.

Signature viewaccessibiliy-checker.vercel.app
Precision Contrast Control application interface
Open Live Site
accessibiliy-checker.vercel.app

Story arc

How this shipped

Building the tools that build the toolsThree beats: what pressed against the work, how the stack answered, and what changed once it was live.

I · Constraint

The brief

Most contrast checkers are one-trick utilities. Designers need a full accessibility suite that fits their workflow without switching tools.

II · Build

The craft

Built real-time WCAG 2.1 and APCA compliance checking with AI palette suggestions that maintain aesthetic intent. Color blindness simulation shows exactly how your design appears to each vision type. Semantic structure and keyboard nav checks surface issues beyond color alone.

III · Proof

What moved after launch

Covers WCAG 2.1 and newer APCA standard in one tool. Color blindness simulation covers 6+ vision deficiency types. AI suggestions fix accessibility issues without destroying the design system.

Inventory

Stack & signals

AccessibilityTypeScript
← Project archive

Tell me what you're building

If you need someone who can own UI, systems, and AI integration without losing the plot—I'm listening. Contract, advisory, or full-time: we'll find the right shape.

Start a ConversationSee More Projects

Related work

Same clustersignal 3
Signal: Medium
AccessibilityTypeScript

Ally A11y CLI

The only accessibility CLI with real-time auto-fix and impact scoring. Published on npm as ally-a11y with MIT license, GitHub Actions CI/CD, and codecov integration.

Same clustersignal 3
Signal: Medium
TypeScriptAccessibility

Rocket Vitals

Scan-first website QA tool that crawls up to 500 pages and runs 200+ checks across SEO, accessibility, performance, security, links, content, and AI readiness. Delivers prioritized reports with severity scoring, department routing, regression monitoring, and client-ready exports.

Same clustersignal 2
Signal: Low
TypeScript

Repro-in-a-Box

Autonomous QA agent that finds bugs on your site, captures reproducible evidence (HAR files + screenshots), validates reproducibility, and integrates with Claude Desktop via MCP. 7 built-in detectors: JavaScript errors, network failures, broken assets, WCAG 2.1 accessibility, Core Web Vitals, mixed content, and broken links. 170 tests, 85% coverage.

Keep exploring

Previous Project

Dwello

Life maintenance tracking app across home, vehicles, equipment, pets, subscriptions, health, and financial domains. PWA with offline support, Stripe one-time purchase for premium, and background job processing via Trigger.dev.

Next Project

Mutahunter

Language-agnostic mutation testing tool using Tree-sitter for precise code analysis.

© 2026 Elizabeth Stein

·Contact·Privacy
Let's work together → GitHubLinkedIn

Built with Next.js, Three.js, and obsessive attention to detail.