weableColor Icon
weableColor
OverviewPricingDocsToolsBlogCase Studies
Get Started

#@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

  1. Install from Marketplace: @weable/a11y-color-utils VS Code Extension
  2. Open any file with color codes (CSS, HTML, JavaScript, etc.)
  3. Hover over color codes to see real-time accessibility analysis
  4. 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

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "@weable/a11y-color-utils"
  4. Click Install
  5. 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

  1. Hover Analysis: Hover over any color code to see accessibility analysis
  2. Color Picker: Click color codes to open native VS Code color picker
  3. Command Palette: Use "Weable: Open Color Picker" for advanced features
  4. 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

##Related Links

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