Color Contrast Checker & Accessibility Validator

Overview

A high-performance, browser-based utility designed for UI/UX designers and front-end developers to verify color contrast ratios in real-time. This application strictly adheres to WCAG 2.1 guidelines to ensure digital products are accessible to all users.

Core Features

• Real-Time Calculation: Instant luminance ratio calculation as you adjust foreground or background hex values.
• WCAG Validation Engine: Explicit Pass/Fail indicators for both AA and AAA compliance levels for normal and large text.
• Interactive Visual Preview: A live preview panel that demonstrates how the text appears against the selected background color, including support for different font sizes.
• Quick-Swap Functionality: Easily toggle foreground and background colors to test inverted readability.
• Copy-to-Clipboard: One-click functionality to copy validated hex codes for use in CSS/SCSS files.
• In-Memory History: A temporary session list of the last 5 color combinations tested, held entirely in volatile browser memory.

UI/UX Layout

• Header: Clean, minimalist title area explaining the utility's purpose.
• Main Tool Area: Two distinct input cards side-by-side (on desktop) for Foreground and Background colors, featuring modern color pickers and text-based hex input fields.
• Preview Panel: A central, high-visibility box demonstrating the combination with sample text (e.g., 'Aa' in different weights).
• Results Section: A modern dashboard showing the specific Contrast Ratio (e.g., 4.5:1) with a color-coded status indicator (Success/Failure).

Design System & Aesthetics

• Palette: Clean, professional light-mode aesthetic using #FFFFFF for backgrounds, #F8F9FA for secondary containers, and soft blue/indigo (#4F46E5) for primary actions.
• Typography: Sans-serif, human-readable font stack (e.g., Inter or system UI fonts).
• Animations: Subtle fade transitions when the contrast ratio updates and smooth scaling effects on hover for buttons/inputs.

Technical Implementation Directives

• Architecture: Single HTML file containing all HTML, CSS (Tailwind CDN), and Vanilla JS.
• Sandbox Compliance:
  • DO NOT use localStorage or sessionStorage.
  • DO NOT use any third-party analytics scripts that track user behavior.
  • All state management must be handled via local JS variables.
• Accessibility: All buttons and inputs must have proper ARIA labels and focus states for keyboard navigation.
• Responsive Strategy: Fluid grid system using Tailwind CSS to stack input panels on mobile devices and expand them on larger screens.
• Performance: Zero external dependencies other than essential CDN-based styling/icon libraries.