Weable Color Accessibility
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
- Open any file with color codes (CSS, JS, TS, HTML, etc.)
- Hover over colors to see contrast ratios and WCAG compliance
- Get instant feedback on accessibility issues
- Generate palettes from any color with one command
- 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!
/* 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
- Place cursor on any color code
- Press
Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
- Type "Weable: Generate Accessible Color Palette"
- Get a new document with 5-color WCAG-compliant palette
Open Color Picker
- Press
Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
- Type "Weable: Open Color Picker"
- 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
- Purchase a license from our website
- Receive license key via email (automated delivery)
- Open VS Code Settings
- Search for "weableColor.licenseKey"
- Enter your license key
- Restart VS Code to activate full features
Our licensing system integrates with Gumroad payments and Supabase user management for secure, automated license delivery.
🔧 Installation
- Open VS Code
- Go to Extensions (
Cmd+Shift+X)
- Search for "Weable Color Accessibility"
- Click Install
- 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
- Install the extension
- Open a CSS file with color codes
- Hover over colors to see accessibility info
- Generate palettes from any color
- 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
⭐ 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
