Weable Color Accessibility

🚨 IMPORTANT USER NOTICE: Licensing Issues RESOLVED ✅

We are aware of and have resolved the critical licensing issues that affected versions 0.3.5 through 0.4.8.

What Was Broken:

• Dual Error Messages: Users saw "Failed to initialize" + "All features unlocked" simultaneously
• Extension Not Working: Hover tooltips, bulb menu, and commands were not functioning
• Activation Failures: Extension would install but not activate properly
• Licensing Conflicts: Complex trial management was breaking core functionality

What's Fixed in v0.4.9+:

• ✅ Single Clean Messages: One clear notification based on your access level
• ✅ All Features Working: Hover tooltips, bulb menu, commands fully functional
• ✅ Proper Activation: Extension activates correctly for all users
• ✅ Creator Access: Creator keys properly recognized and bypass restrictions
• ✅ Trial Users: Full trial features without conflicts or gating

If You're Still Experiencing Issues:

1. Update to v0.4.9+ immediately
2. Uninstall any versions 0.3.5-0.4.8
3. Restart VS Code after installation
4. Contact support if problems persist

⚠️ CRITICAL NOTICE: v0.4.0 Bug Fixed

If you're experiencing licensing conflicts or "Failed to initialize" errors, please update to v0.4.9+ immediately. The v0.4.0 release had critical licensing issues that have been resolved.

Real-time color contrast and accessibility feedback for VS Code. Features color swatch previews, quick fixes, and WCAG diagnostics to help developers create accessible designs.

✨ Features

🎨 Real-time Color Analysis

• Hover tooltips with contrast ratios and WCAG compliance status
• Color previews in tooltips for instant visual feedback
• Multi-format support: Hex, RGB, RGBA, HSL, HSLA, and named colors

🔧 Accessibility Diagnostics

• Squiggly underlines for low contrast color combinations
• Problems panel integration with accessibility warnings
• Quick fix suggestions for better color alternatives

🎯 Smart Commands

• Generate Accessible Color Palette: Create 5-color WCAG-compliant palettes from any base color
• Open Color Picker: Interactive color selection with accessibility feedback
• Multi-language support: CSS, SCSS, LESS, JavaScript, TypeScript, React, HTML

🚀 Developer Experience

• Zero configuration - works out of the box
• Lightweight - minimal performance impact
• Real-time feedback - instant accessibility insights

🎯 How It Works

1. Open any file with color codes (CSS, JS, TS, HTML, etc.)
2. Hover over colors to see contrast ratios and WCAG compliance
3. Get instant feedback on accessibility issues
4. Generate palettes from any color with one command
5. Fix issues with quick-fix suggestions

🧪 Beta Feedback Program

We want your feedback! If you’re part of our beta, help us shape the future of Weable Color Accessibility:

   - **Send feedback anytime:**
     - Run the command: `Weable: Send Beta Feedback` from the Command Palette (Cmd+Shift+P)
     - Or fill out the form here: [Beta Feedback Form](https://weable.pro/products/weable-color/feedback)

Your input goes directly to the team and helps us improve. Thank you!

📋 Supported Color Formats

/* Hex colors */
color: #ff0000;
color: #f00;

/* RGB colors */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* HSL colors */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* Named colors */
color: red;
color: blue;
color: green;
/* And 50+ more named colors */

🛠️ Commands

Generate Accessible Color Palette

1. Place cursor on any color code
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
3. Type "Weable: Generate Accessible Color Palette"
4. Get a new document with 5-color WCAG-compliant palette

Open Color Picker

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type "Weable: Open Color Picker"
3. Use interactive color picker with accessibility feedback

🎨 Example Output

When you generate a palette from #ff0000 (red), you get:

// Accessible Color Palette Generated by weableColor
// Base color: #ff0000
// Generated: 2025-07-31T04:30:00.000Z

const accessiblePalette = ["#ff0000", "#ffffff", "#000000", "#cccccc", "#333333"];

// Usage:
// - Primary: #ff0000
// - Secondary: #ffffff
// - Accent: [#000000](https://github.com/weable/weable-color-vscode/issues/000000)
// - Neutral: #cccccc
// - Background: [#333333](https://github.com/weable/weable-color-vscode/issues/333333)

// CSS Variables (copy-paste ready):
:root {
  --color-primary: #ff0000;
  --color-secondary: #ffffff;
  --color-accent: [#000000](https://github.com/weable/weable-color-vscode/issues/000000);
  --color-neutral: #cccccc;
  --color-background: [#333333](https://github.com/weable/weable-color-vscode/issues/333333);
}

💰 Pricing & Licensing

This extension operates on a freemium model with seamless integration to our existing licensing system:

Trial Mode (Free)

• Basic color detection and contrast checking
• Real-time color swatch previews
• Basic accessibility information
• Community support

Pro License ($4.99/month)

• Full VS Code extension features
• Advanced color picker (1:3 split)
• Accessible palette generation
• Custom webview integration
• Priority support & updates
• npm library access included

API License ($19.99/month)

• All Pro features
• Unlimited API calls
• Team collaboration tools
• Custom integration support
• Early access to new features

Purchase licenses at weable.pro/products/weable-color/pricing

License Key Setup

1. Purchase a license from our website
2. Receive license key via email (automated delivery)
3. Open VS Code Settings
4. Search for "weableColor.licenseKey"
5. Enter your license key
6. Restart VS Code to activate full features

Our licensing system integrates with Gumroad payments and Supabase user management for secure, automated license delivery.

🔧 Installation

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X)
3. Search for "Weable Color Accessibility"
4. Click Install
5. Purchase a license to unlock full functionality

📚 Supported Languages

• CSS - Full support
• SCSS/LESS - Full support
• JavaScript - Color string detection
• TypeScript - Color string detection
• React/JSX - Color prop detection
• HTML - Style attribute detection
• JSON - Color value detection
• Markdown - Inline color detection

🎯 Accessibility Standards

This extension helps you meet:

• WCAG 2.1 AA - Minimum contrast ratios
• WCAG 2.1 AAA - Enhanced contrast ratios
• Section 508 - Federal accessibility requirements
• ADA Compliance - Americans with Disabilities Act

🚀 Quick Start

1. Install the extension
2. Open a CSS file with color codes
3. Hover over colors to see accessibility info
4. Generate palettes from any color
5. Fix issues with quick-fix suggestions

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

Proprietary Software License - see LICENSE file for details.

This software is licensed, not sold. Unauthorized use is prohibited.

🔗 Links

• Website: weable.pro
• Documentation: weable.pro/docs
• GitHub: github.com/weable/weable-color-vscode
• Issues: GitHub Issues

⭐ Support

If you find this extension helpful, please:

• ⭐ Star the repository
• 📝 Report issues on GitHub
• 💬 Join our community discussions

Made with ❤️ by the Weable team