I have spent more hours than I care to admit trying to use an image colour contrast checker the hard way. Squinting at a screen I can barely see, trying to select precisely the right pixels, copying hex values across to a separate tool, then working out whether the contrast ratio actually passes WCAG. As a blind person, that workflow was never going to work for me. So I built something better, and this week, in time for Global Accessibility Awareness Day, I am releasing it.
The tool is free, runs entirely in your browser, and you can try it right now at image-colour-contrast-checker.timdixon.net.
Why Existing Image Colour Contrast Checker Tools Did Not Work for Me
Most contrast checking tools assume you can see what you are doing. You upload an image, you manually pick a foreground colour, you manually pick a background colour, and the tool tells you the ratio. That is fine if you can squint at a photo and confidently select the right region. I cannot do that reliably anymore.
There are browser extensions that check contrast on web pages, but that does not help me when someone sends me a poster, a slide deck screenshot, or a social media graphic that I need to review. The image arrives in my inbox and I need to know: does the text in this image meet WCAG standards? That question should not require me to have usable vision.
The problem is common. Anyone working in accessibility, communications, or marketing needs to check images regularly, not just web pages, and the tooling has not kept up.
How Claude Code Helped Me Build It
I want to be honest about this: I am not a developer. I can read code, I can reason about it, and I have spent years in IT architecture. But writing the kind of JavaScript needed to build a browser-based image analysis tool from scratch is not something I would have done on my own.
Claude Code changed that. I worked through the problem step by step, describing what I needed, reviewing what it produced, testing it, and iterating. What surprised me was how well it helped me find and connect open source components I did not even know existed. It was not just writing code, it was helping me navigate a world of libraries and techniques then assembling them into something coherent.
The build took days rather than weeks, and the result is genuinely better than I expected.
What the Image Colour Contrast Checker Actually Does
The tool analyses an image for text automatically. It uses @gutenye/ocr-browser to detect where text appears in the image, powered by onnxruntime-web running PaddleOCR models directly in your browser. It then samples the foreground and background colours around that text and calculates the contrast ratio.
The output is a downloadable report. You can export as a PDF generated using pdfmake, or as a Markdown file if you prefer something you can drop straight into a document or ticket. The report flags every region where text was detected, tells you whether it passes WCAG AA or AAA, and highlights the parts that fail. You do not need to pick pixels. You do not need to know anything about hex codes. You drop in an image and the tool does the work.
I am genuinely taken aback by what the open source community has built. The fact that you can run OCR, contrast analysis, and report generation entirely in the browser, with no server, no account, and no data leaving your device, is something I did not think would be possible when I started.
Why the Image Colour Contrast Checker Runs Entirely in Your Browser
This part matters to me a great deal, and I want to explain why.
Many of the images I need to check are commercially sensitive. Internal communications, draft marketing materials, unreleased product images. I was not willing to build a tool that uploads those images to a server I control, let alone a third-party service. The privacy risk is real, and it would undermine the trust of anyone using the tool in a professional context.
Everything runs client-side. Your image never leaves your device. There is no server receiving your files, no analytics on what you upload, nothing stored anywhere. I made this decision deliberately, and I think it is the right one for a tool that accessibility professionals will use in the course of real work.
Why I Chose Global Accessibility Awareness Day
I chose this week deliberately. Global Accessibility Awareness Day is about more than awareness, it is about action. I wanted to release something practical that people can use immediately to embed colour contrast checking into their processes.
That is my hope for this tool. Not that it becomes a famous product, but that it gets used. That designers start dropping images into it before they publish. That communications teams check posters before they go out. That accessibility consultants have something fast and private they can use with clients.
If you work in accessibility, please try it and let me know how you get on. If it saves you time or catches something that would have slipped through, that is exactly what it is there for.
Tell Me What You Think
You can try the tool at image-colour-contrast-checker.timdixon.net. It is free, open source, and runs entirely in your browser. If you want to dig into the code or contribute, you will find everything on GitHub.
I would love to hear how you get on with it, whether it works for your workflow, whether something is missing, or whether it surfaces issues you had not spotted before.
Tell me what you think in the comments below or on X @timdixon82
