Inspiration
I started with a simple question: what happens when an organizer chooses shirts for each team separately, then discovers that opposing teams are hard to tell apart?
That problem matters even more for players, referees and spectators with colour-vision deficiency. A combination that looks clearly different to the organizer may be confusing to someone else.
For a small tournament, changing one team’s shirt can affect several matches, the budget and the final order. I built MatchClear to help organizers consider those decisions together, before buying shirts.
What it does
MatchClear helps tournament organizers choose shirts that opposing teams can distinguish, while respecting their budget and purchasing requirements.
Organizers add teams, sizes, quantities, fixtures and shirt options, including shirts they already own. The YouCam Clothes Virtual Try-On API generates on-person previews from a person photo and a real shirt reference. This lets the organizer inspect how the main colours, sleeves and patterns appear together when worn.
After checking the preview’s accuracy, the organizer compares opposing teams using:
- Ordinary view
- Grayscale, to inspect differences without colour
- Protan and deutan models, covering major red–green colour-vision differences
- Tritan models, covering blue–yellow colour-vision differences
- Partial-loss views for protanomaly, deuteranomaly and tritanomaly
These are screening aids, not a guarantee of accessibility or visibility on a real pitch. The organizer records a human decision and its reason.
The planner combines those reviews with availability, quantities, fixed shirt choices and budget to find a complete tournament selection. The confirmed result becomes an exportable seller’s brief.
A floating assistant helps users navigate the workflow, prepare changes and request a plan. Its suggestions reflect the current tournament.
How we built it
I built the web application with Next.js, React and TypeScript, using SQLite and Drizzle to save tournament data, reviews and plans.
YouCam requests run through a server-side background worker. This keeps credentials private and lets preview jobs continue independently of the browser. Completed previews are saved and reused.
Browser image tools let organizers mark the shirt area and switch between colour-vision screening views. Keeping the comparison focused on the fabric helps prevent the person’s face or background from distracting from the shirt decision.
A separate planning engine checks the tournament’s constraints. Missing, rejected or outdated reviews cannot silently become approvals.
The assistant handles straightforward actions locally and uses Nemotron through OpenRouter when a written request needs AI interpretation. Proposed changes are shown before they are applied.
Challenges we ran into
The hardest part was keeping every decision connected to the right evidence. Changing a shirt image should invalidate its previews and reviews, while changing a price should require a new plan without regenerating images.
Generated previews also need inspection. A successful API response does not necessarily mean every important colour or pattern was preserved, so I added acceptance and rejection controls before matchup review.
Colour-vision screening required careful boundaries, too. A simulation can highlight a possible problem, but it cannot reproduce everyone’s vision or account for real-world lighting, movement and distance.
Another challenge was making the workflow understandable. I reorganized it into five stages and moved the assistant into a floating interface that helps alongside the work.
Accomplishments that we're proud of
I completed the full journey from tournament setup to a confirmed, exportable brief.
My four-team Premier League practice event demonstrates real saved YouCam previews, colour-vision screening, human reviews across six fixtures and a complete tournament plan.
I’m particularly proud that colour-vision considerations are part of the shirt-selection process, rather than a separate filter with no effect on the final decision.
I tested the workflow myself. Broader user validation, including feedback from people with colour-vision deficiency, is still ahead.
What we learned
Virtual try-on becomes more useful when its output supports a concrete decision. In MatchClear, the preview feeds into inspection, opposing-team reviews and the final shirt selection.
I also learned that choosing distinguishable shirts involves more than naming their colours. Lightness, sleeve colours, panels and patterns can all give reviewers useful clues.
Most importantly, generated images, screening simulations, human judgments and calculated results need to remain clearly separated.
What's next for MatchClear
Next, I want to test MatchClear with tournament organizers and people with different colour-vision deficiencies, then compare the screen reviews with physical shirts under different lighting and viewing conditions.
I also want to add supplier-backed prices and availability, making the final brief more useful for an actual order.
Log in or sign up for Devpost to join the conversation.