Accessibility-First Workflow Integration Platform

Seamlessly sync color palettes across VS Code, Figma, and colorStudio. Build accessible designs faster with workflow integration that works where you work.

Live

VS Code Extension

For developers

Install Extension

Live

colorStudio

For designers & developers

Open colorStudio

Live

Figma Plugin

For designers

Install in Figma

See it in action

Experience the power of weableColor directly in your VS Code workflow

weableColor VS Code Extension - Accessibility Inspector and Color Palette Generator showing real-time WCAG compliance, palette generation, and interactive color analysis

Workflow Integration That Works Where You Work

Sync color palettes seamlessly across VS Code, Figma, and colorStudio. Build accessible designs faster with tools that integrate into your existing workflow.

Precise WCAG & APCA Checks

Tired of manual checks? Instantly calculate accurate contrast ratios for both WCAG 2.1 AA/AAA and APCA standards, ensuring your colors are always compliant.

Intelligent Color Fixing

Stuck with failing colors? Automatically find the minimum, most aesthetic adjustment needed to meet contrast targets, saving you time and design integrity.

Dynamic Palette Generation

Struggling to build accessible themes? Quickly generate harmonious and accessible color schemes based on your primary color, ensuring brand consistency and compliance.

Robust Color Manipulation

Need precise color control? Access powerful functions for seamless color conversion (RGB, HSL, Hex), lightening, darkening, blending, and more, all while maintaining accessibility.

Perfect For

Frontend Developers

Sync palettes from Figma to VS Code instantly. Build accessible components with colors that stay in sync across your entire workflow.

Design Systems Teams

Maintain consistent, accessible color palettes across VS Code, Figma, and colorStudio. One source of truth, everywhere you work.

Agencies & Freelancers

Deliver accessible projects faster with workflow integration. Design in Figma, code in VS Code, validate in colorStudio—all synced seamlessly.

Tool Builders

Integrate our accessibility-first color logic into your products via API or library. Build on a foundation that prioritizes inclusive design.

Recent activity from the community

New: WCAG contrast in Slack

Type /contrast #1a1a1a #f5f5f5 in Slack for a live ratio and AA/AAA checklist — same weableColor library as the free web checker.

Learn more Add to Slack

Features for Modern Developers

Experience the full power of weableColor

Interactive Demo

Click any color code then the blue light bulb 💡 to instantly see WCAG compliance and contrast ratios.

theme.ts

const colorVariants = [

#ff0000, // Red

#00ff00, // Green

#0000ff, // Blue

#ffff00, // Yellow

#ff00ff // Magenta

];

// Theme configuration

const theme = {

colors: colorVariants,

spacing: [0, 4, 8, 16, 32, 64],

borderRadius: [0, 2, 4, 8, 16],

};

export default theme;

Interactive Demo

Click any palette definition then the blue light bulb 💡 to generate accessible color palettes with CSS variables and Tailwind config.

palettes.ts

// Accessible Color Palettes

interface ColorPalette {

colors: string[];

accessibility: AccessibilityScore;

}

const primaryPalette: ColorPalette = {

colors: [

'#1a365d', '#2d3748', '#4a5568',

'#718096', '#a0aec0', '#e2e8f0'

accessibility: {

overall: 'AAA',

score: 95

}

};

const accentPalette: ColorPalette = {

colors: [

'#c53030', '#e53e3e', '#f56565',

'#fc8181', '#fed7d7', '#fed7d7'

accessibility: {

overall: 'AA',

score: 87

}

};

export { primaryPalette, accentPalette };

Interactive Demo

Watch code being written, then click the squiggly lines to see linter feedback and fixes.

MyComponent.tsx

import { useState, useEffect } from 'react';

See weableColor Tools in Action

Experience the power of accessible color tools in your workflow

Terminal Workflow Demo

See how developers use our CLI tools in real workflows

weableColor Terminal

Quick Start Examples

Basic Usage

Get started with basic contrast checking

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

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

// Check if colors meet WCAG AA standards
const ratio = calculateContrastRatio('#ffffff', '#000000');
const isAccessible = checkContrast('#ffffff', '#000000', 'AA');

console.log(`Contrast ratio: ${ratio}`);
console.log(`WCAG AA compliant: ${isAccessible}`);

Contact Support

Advanced Features

Generate accessible color palettes automatically

// Generate accessible color palette
import { generateAccessiblePalette } from '@weable-tools/a11y-color-utils';

const palette = generateAccessiblePalette('#0078D7', {
  targetContrast: 4.5,
  includeVariants: true
});

console.log(palette);
// Output: { primary: '#0078D7', light: '#4A9DE8', dark: '#005A9E', ... }

Get API Access

Join developers worldwide building accessible products with confidence

Join the accessibility revolution!

Recent activity from the community

Alex Johnson

UX Designer @ Innovatech

“This tool fundamentally changed how I approach color selection. Ensuring AA/AAA compliance is now effortless.”

Samantha Lee

Frontend Developer @ CodeCrafters

“Integrating the color utils library was seamless. It caught contrast issues I would have missed.”

Maria Garcia

Accessibility Consultant

“I recommend weableColor Utils to all my clients. It simplifies a complex aspect of accessibility.”

Kenji Tanaka

Digital Agency Owner

“Ensuring our client sites are accessible is crucial. This tool makes achieving color compliance straightforward.”

Now on Figma Community

weableColor for Figma is live

Check WCAG contrast on real layers, fix colors in-file, preview color-blind views, and export CSV reports — without leaving Figma. Install free from Community; Pro unlocks export and cross-tool workflows.

Figma Plugin

VS Code Extension

colorStudio

Live

Install in Figma Feature overview Read the launch post

What you get

Mission Control + Live Inspector

Pass/fail on page or selection, then layer-level contrast with a clear next step.

Generate + in-file fixes

Explore harmonies, then apply suggested fills and strokes without leaving the file.

CVD vision + CSV export

Color-blind preview in flow; Pro unlocks CSV reports and cross-tool sync with VS Code and colorStudio.

One ecosystem, three surfaces

Design in Figma, code in VS Code, validate in colorStudio — same accessibility-first color story across the stack.

VS Code Extension Open colorStudio

Accessibility-First Workflow Integration Platform

VS Code Extension

colorStudio

Figma Plugin

See it in action

Workflow Integration That Works Where You Work

Sync color palettes seamlessly across VS Code, Figma, and colorStudio. Build accessible designs faster with tools that integrate into your existing workflow.

Precise WCAG & APCA Checks

Intelligent Color Fixing

Dynamic Palette Generation

Robust Color Manipulation

Perfect For

Frontend Developers

Design Systems Teams

Agencies & Freelancers

Tool Builders

New: WCAG contrast in Slack

Features for Modern Developers

Experience the full power of weableColor

Interactive Demo

Interactive Demo

Interactive Demo

See weableColor Tools in Action

Experience the power of accessible color tools in your workflow

Terminal Workflow Demo

Quick Start Examples

Basic Usage

Advanced Features

Trusted by Developers Worldwide

Join developers worldwide building accessible products with confidence

Alex Johnson

Samantha Lee

Maria Garcia

Kenji Tanaka

weableColor for Figma is live

What you get

Mission Control + Live Inspector

Generate + in-file fixes

CVD vision + CSV export

One ecosystem, three surfaces