@weable/a11y-color-utils Documentation

Overview

@weable/a11y-color-utils is the first accessibility-first color tool in VS Code, designed to improve accessibility and user experience in web applications. It provides real-time WCAG compliance checking, native color picker integration, and professional developer workflows.

🚀 Quick Start

VS Code Extension

Install from Marketplace: @weable/a11y-color-utils VS Code Extension
Open any file with color codes (CSS, HTML, JavaScript, etc.)
Hover over color codes to see real-time accessibility analysis
Use Command Palette (Ctrl+Shift+P) → "Weable: Open Color Picker"

npm Package

npm install @weable-tools/a11y-color-utils

import { calculateContrastRatio, generateAccessiblePalette } from '@weable-tools/a11y-color-utils';

// Calculate contrast ratio
const ratio = calculateContrastRatio('#ffffff', '#000000');
console.log(ratio); // 21.0 (excellent contrast)

// Generate accessible palette
const palette = generateAccessiblePalette('#007acc', { targetRatio: 4.5 });

✨ Key Features

VS Code Extension

Native Color Picker Integration: Click any color code to open VS Code's native color picker
Real-Time Accessibility Analysis: Hover over colors to see WCAG compliance status
Custom Webview Color Picker: Advanced color picker with HTML preview
Enhanced Palette Generation: CSS variables, Tailwind config, timestamps
Professional Notifications: Clean, uncluttered UX with helpful guidance

npm Package

Accessibility Compliance: Built-in WCAG 2.1 AA/AAA contrast ratio calculations
Color Palette Generation: Automatic generation of accessible color palettes
Theme Integration: Seamless integration with popular design systems
Performance Optimized: Lightweight and fast color calculations

🎯 Competitive Advantages

First Accessibility-First Tool: No other VS Code color tool prioritizes accessibility
Professional Features: Custom webview, palette generation, CSS/Tailwind output
Native Integration: DocumentColorProvider + custom webview
Developer-Focused: Built for professional workflows
Modern Technology: TypeScript, enterprise-ready architecture

📖 Documentation Sections

Support FAQ

Comprehensive FAQ covering installation, usage, troubleshooting, and advanced features for both VS Code extension and npm package.

Email Templates

Professional email templates for launch announcements, support responses, and newsletter signups.

Deployment Guide

Complete deployment guide for the @weable/a11y-color-utils production site and development workflow.

🔧 Installation & Setup

VS Code Extension

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "@weable/a11y-color-utils"
Click Install
Restart VS Code

npm Package

# Install the package
npm install @weable-tools/a11y-color-utils

# Or with yarn
yarn add @weable-tools/a11y-color-utils

💰 Pricing

VS Code Extension

Monthly: $4.99/month
Annual: $49.99/year (17% savings)

npm Package

Free: Open source with MIT license
Enterprise: Contact for custom licensing

🎨 Usage Examples

VS Code Extension

Hover Analysis: Hover over any color code to see accessibility analysis
Color Picker: Click color codes to open native VS Code color picker
Command Palette: Use "Weable: Open Color Picker" for advanced features
Palette Generation: Generate accessible color palettes with CSS/Tailwind output

npm Package

import { 
  calculateContrastRatio, 
  generateAccessiblePalette,
  isAccessible,
  getAccessibilityStatus 
} from '@weable-tools/a11y-color-utils';

// Basic contrast calculation
const ratio = calculateContrastRatio('#ffffff', '#000000');
console.log(ratio); // 21.0

// Check accessibility
const accessible = isAccessible('#ffffff', '#000000', 'AA');
console.log(accessible); // true

// Get detailed status
const status = getAccessibilityStatus('#ffffff', '#000000');
console.log(status); // { level: 'AAA', ratio: 21.0, passes: true }

// Generate palette
const palette = generateAccessiblePalette('#007acc', {
  targetRatio: 4.5,
  variations: 5,
  includeHex: true,
  includeRgb: true
});

🚨 Troubleshooting

VS Code Extension Issues

Extension not working: Restart VS Code after installation
Color picker not opening: Ensure file has color codes (CSS, HTML, etc.)
Hover not working: Check if file is supported format
Performance issues: Disable other color extensions that might conflict

npm Package Issues

Import errors: Check package name is correct: @weable-tools/a11y-color-utils
TypeScript errors: Ensure types are properly imported
Build issues: Check Node.js version compatibility

📞 Support

Documentation: Support FAQ
Contact: Contact Form
GitHub: Issues and Discussions
VS Code Marketplace: Extension Page

🔗 Related Links

@weable/a11y-color-utils - Making the web accessible, one color at a time. 🎨♿