DEV Community

Dhanush N
Dhanush N

Posted on

altcheck: draft alt text and contrast fixes with a local open vision model

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission 💸

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission 💸

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

altcheck is a small command-line tool for freelance web developers. Give it one URL and it writes a local report.html. Images with a missing, filename-style or generic alt get a drafted alt text. Text that fails the color-contrast check gets a suggested color and a copy-paste CSS fix. Everything is a draft for a person to review. It does not edit the site, crawl it, or check full accessibility.

Repo: https://github.com/DhanushNehru/altcheck

Who would pay for this

A freelancer or small agency fixing client pages. Running it over a page and fixing the obvious gaps takes minutes, so it could be sold as a quick accessibility tidy-up pass. That is my guess. I have not shown it to a client or a paying user yet.

Demo

Animated preview of the altcheck demo: terminal run, then the report with drafted alt text and contrast fixes

The full 52-second demo video (no audio) is in the repo: https://github.com/DhanushNehru/altcheck/blob/main/docs/1-altcheck-demo.mp4

A real run on W3C's deliberately inaccessible demo page, three images with no alt:

Image Drafted alt
top_weather.gif A yellow sun and a gray cloud.
teaser_right1.jpg A woman is singing on a microphone in front of a large screen with bright lights.
teaser_right2.jpg A flower with a yellow center and white petals.

I checked the thumbnails and the drafts matched them. They describe what is visible, not what the image is for (the weather icon is really "today's weather"), so a person still edits them. The page also had 2 contrast failures. The video is a produced walkthrough built from this real run's output, and the long waits in it are sped up and labeled.

How I Built It

Playwright loads the page. axe-core runs only the color-contrast rule, and a small Python function adjusts the text color's lightness until the ratio passes. For images, SmolVLM-500M-Instruct (Apache 2.0) runs locally through transformers and drafts one short sentence, then answers a yes/no on whether the image looks decorative. A missing alt and alt="" are treated differently, since an empty alt is valid for decoration.

My first version sent the model the surrounding page text and link details. The 500M model copied that text or invented content, so now it only gets the nearest heading, and the link destination is added by code.

On a 2-core CPU with about 2 GB of RAM, float32 ran out of memory, so it uses bfloat16 there and takes about 20 seconds per image. I have not tested GPUs, Apple Silicon, Windows, other models, or many real sites. Six unit tests cover the image selection, contrast math and report escaping.

Why Does Open Innovation Matter?

Client pages are often unreleased or private. An open-weight model on the freelancer's own machine means no images go to an API and there is no per-image fee. Anyone can read the prompts, swap in another open-licensed model with --model, and see exactly where it fails. The drafts are small-model quality, which is why the report says to review before using.

I picked SmolVLM because its license allows commercial use. A larger vision model I looked at is non-commercial only, which would not fit a tool someone pays for.

Next Steps

Let the user pass a hint about each image's purpose, test on more real pages, and try a larger open model on machines that can run it.

Top comments (0)