ContrastCraft Project Report
1. The Concept
ContrastCraft is a responsive web-based color contrast checker. It helps designers, developers, and learners compare one text color with one solid background color, understand the WCAG 2.2 text-contrast result, see the colors in a live preview, and copy the resulting CSS.
The project focuses on a fast, simple workflow: choose colors, review the contrast result, adjust when needed, and copy usable CSS. It checks fully opaque six-digit HEX colors only and does not claim to be a complete accessibility audit.
2. The Stack
The Stack: Vanilla HTML, CSS, and JavaScript in a browser-based single-page application. The project has no framework, package dependency, backend, database, build process, external API, or internet requirement.
The AI Assist: AI support was used to help implement and refine the page structure, responsive styling, WCAG contrast calculations, validation behavior, accessible interaction states, local icon integration, documentation, and visual improvements based on the approved mockups and feedback.
3. The 1 Day Sprint
Morning (Hours 1–3): Established the single-page structure, approved content, color controls, live preview, contrast-results area, CSS output, responsive layout foundation, and accessible semantic structure.
Afternoon (Hours 4–6): Implemented HEX validation and normalization, WCAG relative-luminance and contrast-ratio calculations, AA/AAA status classification, live rendering, color swapping, and copy-to-clipboard success and failure handling.
The Finish Line (Hour 7–8): Refined the visual layout against the mockups, improved color-control alignment, added the local designer preview image and icons, strengthened pass/fail status presentation, verified responsive behavior and keyboard focus, and completed the project documentation.
4. The Roadblocks
Roadblocks: The main challenge was keeping the interface visually aligned with the approved mockup while preserving the established one-page flow, responsive behavior, validation, and contrast calculations. Small visual details—such as keeping the picker and HEX value inside one control, positioning the desktop preview column, making pass/fail icons clear without relying on color alone, and ensuring the ratio icon survived dynamic updates—required focused iteration. The final solution preserved the core calculation logic and kept all user-facing functionality intact.
5. Key Takeaways
A small, clearly scoped accessibility utility can deliver immediate value when the interface explains technical output in plain language.
Visual polish and accessibility work best together: status text, icons, color, keyboard focus, validation feedback, and responsive layout all contribute to a clearer experience.
My final thought: ContrastCraft demonstrates that useful accessibility support does not need to be complex. A focused tool that helps users make a better color decision in a few seconds can improve everyday design and development work.