Project Overview

Why I Built It

I was given an open-ended assignment: create a tool that detects a hex color value and determines if it’s accessible against a white background.

What I Delivered

Instead of a simple checker, I built a reusable Angular component and directive that provides real-time, keystroke-based contrast validation using WCAG AA standards. The experience incorporates UX best practices such as:

• Progressive disclosure — Key results are shown upfront, with additional details revealed on hover.

• Intelligent behavior — Automatically detects 3-digit vs 6-digit hex values and recognizes color codes even when surrounded by other text.

• Clear error handling — Immediate feedback helps users input valid values with confidence.

What This Demonstrates

I didn’t just complete a task—I turned it into a thoughtful, scalable tool that reflects my creativity, attention to user experience, and commitment to building meaningful UI solutions.

Process

Create Angular Directive

• Computes relative luminance for two colors

• Derives the contrast ratio

• Evaluates the ratio against WCAG 2.2 Level AA (4.5:1 normal text, 3:1 large)

• Shows instant, real-time pass/fail feedback to the user

Insert code here

Apply Directive to an Input

Attach the directive to an input, then show the contrast ratio:

• Apply the directive on the color input field

• Add a small circular badge at the input’s top-right corner to display the live contrast ratio.

Insert code here

Adding More Detail on Hover

Sometimes users need more info. To help with that, I added a hover tooltip that shows:

• Typed color

• Background color

• Contrast ratio

• Overall pass/fail status

• WCAG Level AA status for normal text

• WCAG Level AA status for large text

• A short explanation of what makes each pass or fail

This lets users see extra details only when they need them, without making the screen feel crowded.

Insert code here

Next Step: Auto-Choosing Text Color

Next, I made the tool smarter by checking if black or white text is easier to read on the chosen color. The directive compares both and picks the one with better contrast.

Result: The component now helps users choose the best text color automatically.

Insert code here

Last Upgrade: Opacity Support

For the next enhancement, I added support for opacity. I built a way for two color inputs to work together—one sets the base color, and the other adjusts its opacity.

Result: Users can now see how transparency affects contrast in real time.

Final Result