VisiEase

Paste your URL and watch VisiEase bring clarity to your design.
Detailed accessibility insights to help you refine your user experience
Done scanning! Let’s see how user-friendly your design really is.
AI-powered insights to enhance clarity and accessibility across your design.
Actionable AI suggestions — turning analysis into real improvements.
Heatmap analysis to measure visual impact and usability
Making the web a more inclusive place, one design at a time.
Experience your website through every user’s eyes — color blind, low vision, and dyslexic simulations for inclusive design.
Accessibility check: color-blind simulation activated!
See how your design looks with limited visibility
See how your content feels for dyslexic users.
Our mission is to make digital design accessible, inclusive, and effortless for everyone.
Empowering designers to see through every user’s eyes
Reach out and join our mission for accessible design
Check, compare, and improve your design’s visual clarity
WCAG-approved contrast for truly inclusive design.
Scanning your site for accessibility issues
Detected accessibility issues — fix and elevate your design.
Score unlocked! Accessibility level achieved
Reimagine + VisiEase = next-level design optimization
We applied Reimagine’s suggestions — and the difference is clear
Green ticks everywhere - mission accomplished!

Track 03

we participated in the MindWeb Innovation Hackathon 2025, joining Track 3 — Visual Experience Analytics. Our team, VisiEase, aimed to make web design more inclusive, clear, and data-driven by analyzing visual accessibility through AI.

Inspiration

We were inspired by the realization that many websites look visually stunning but fail accessibility standards. Our goal was to build a platform that helps designers and developers create websites that are both beautiful and usable for everyone, including users with visual and cognitive challenges.

What it does

VisiEase analyzes websites for accessibility, clarity, and readability. It identifies issues like low contrast, visual clutter, and poor text visibility. Its standout feature is Persona Simulation — allowing designers to view their website through the lens of color blindness, low vision, or dyslexia. The system also generates AI-powered suggestions for accessibility improvements.

How we built it

We built VisiEase using React 18 (TypeScript), Vite, Tailwind CSS, shadcn-ui, and Framer Motion for a responsive and elegant UI. The backend is powered by Lovable Cloud (Supabase) with Edge Functions handling contrast checking, readability scoring, heatmap generation, and persona simulations. We integrated Reimagine.Web and Lovable AI for automated analysis, accessibility scoring, and smart design recommendations.

Challenges we ran into

Building real-time persona simulations while keeping performance high.

Integrating multiple AI tools ( Lovable AI) into one smooth workflow.

Ensuring accurate and consistent accessibility scores across different devices.

Accomplishments that we're proud of

Built a full-fledged accessibility analyzer within the hackathon timeframe.

Successfully simulated real user experiences through AI-driven personas.

Integrated Lovable Cloud, Reimagine.Web, and Lovable AI into a cohesive tool.

Collaborated effectively across design, research, and development.

What we learned

We learned that accessibility isn’t just a design choice — it’s a responsibility. Our team explored AI-driven accessibility analysis, Supabase Edge Functions, and inclusive design principles (WCAG). We also learned how to work efficiently under pressure while building something meaningful.

What's next for VisiEase

We plan to:

Expand persona simulations to cover more accessibility types (e.g., ADHD, motion sensitivity).

Build a browser extension for live accessibility checks.

Improve AI feedback for more accurate, real-time recommendations.

Built With

api&aimodels
charts&visualization
date-fns
emblacarousel
gsap
lovablecloude(supabase-powered-backend)
loveableai
lucidereact
radix
react18withtypescript
reacthook
reactrouterdomv6
routing&navigation
shadcn-ui
sonner
supabaseedgefunction
tailwindcss
tanstack
three.js
vaul
vite
zod

Submitted to

WebMind Innovation Hackathon

Created by

Led the project’s development, architecture, and integration. Built the full-stack foundation and implemented the AI-powered accessibility and analysis features.

Key Contributions:

Developed the frontend and backend using React 18 (TypeScript), Vite, and Lovable Cloud (Supabase).

Integrated Reimagine.Web for website accessibility evaluation and applied its recommendations for UI improvement.

Implemented AI-driven features like contrast checker, readability scoring, persona simulations (color blindness, dyslexia, low vision), and heatmap generation using custom Supabase Edge Functions.

Handled deployment, state management (TanStack Query, React Hook Form, Zod), and form validation.

Ensured smooth CI/CD and led overall project coordination.

Tahreem Rasheed
MERN Stack Developer | Problem Solver | Tech Enthusiast Passionate about building modern, scalable, and meaningful web apps.
Focused on data validation, visualization, and accessibility metric analysis.

Key Contributions:

Conducted readability and color contrast research aligned with WCAG standards.

Implemented Recharts and date-fns for visual data representation.

Helped evaluate clutter detection results and support AI-driven analysis through backend data pipelines.

Collaborated in testing and validating outputs for consistency and user inclusivity.

Raviha Khan
Styled the interface using Tailwind CSS, shadcn-ui, and Radix UI to ensure accessibility and design consistency.

Enhanced interactivity through Framer Motion, GSAP, and Three.js for smooth transitions and dynamic visuals.

Utilized Embla Carousel, Lucide React, and vaul components for modern UI elements.

Applied design recommendations generated via Reimagine.Web and Lovable AI for accessibility optimization.

Alishbah Zaeem

Updates

Tahreem Rasheed started this project — Oct 14, 2025 01:56 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.

Tahreem Rasheed posted an update — Oct 14, 2025 01:25 PM EDT

Led the project’s development, architecture, and integration. Built the full-stack foundation and implemented the AI-powered accessibility and analysis features.

Key Contributions:

Developed the frontend and backend using React 18 (TypeScript), Vite, and Lovable Cloud (Supabase).

Integrated Reimagine.Web for website accessibility evaluation and applied its recommendations for UI improvement.

Implemented AI-driven features like contrast checker, readability scoring, persona simulations (color blindness, dyslexia, low vision), and heatmap generation using custom Supabase Edge Functions.

Handled deployment, state management (TanStack Query, React Hook Form, Zod), and form validation.

Ensured smooth CI/CD and led overall project coordination.

Log in or sign up for Devpost to join the conversation.

Alishbah Zaeem posted an update — Oct 14, 2025 01:24 PM EDT

Styled the interface using Tailwind CSS, shadcn-ui, and Radix UI to ensure accessibility and design consistency.

Enhanced interactivity through Framer Motion, GSAP, and Three.js for smooth transitions and dynamic visuals.

Utilized Embla Carousel, Lucide React, and vaul components for modern UI elements.

Applied design recommendations generated via Reimagine.Web and Lovable AI for accessibility optimization.

Log in or sign up for Devpost to join the conversation.

Raviha Khan posted an update — Oct 14, 2025 01:11 PM EDT

Focused on data validation, visualization, and accessibility metric analysis.

Key Contributions:

Conducted readability and color contrast research aligned with WCAG standards.

Implemented Recharts and date-fns for visual data representation.

Helped evaluate clutter detection results and support AI-driven analysis through backend data pipelines.

Collaborated in testing and validating outputs for consistency and user inclusivity.

Log in or sign up for Devpost to join the conversation.