weableColor Blog

tips

Beginner

3/12/2026

Tips & Tricks - Optimizing Accessible Palette Generation with @weable/a11y-color-utils

# Tips & Tricks: Optimizing Accessible Palette Generation Generating color palettes programmatically is powerful, but ensuring they are *consistentl...

Intro to WCAG Principles (POUR)

# Understanding the Foundation: An Intro to WCAG Principles (POUR) When we talk about web accessibility, especially concerning color and contrast (l...

3 min

Announcing colorStudio: Accessible Color Design, Finally Done Right

We just launched colorStudio, our new web app for building accessible color palettes and gradients with real-time WCAG and APCA analysis.

2 min

colorStudio: The Complete Guide to Accessible Color Design

Master colorStudio - the unified Color Generator with palette and gradient capabilities. Learn how to create accessible color schemes, generate beautiful gradients, and export to Figma, CSS, and SVG with real-time WCAG compliance.

8 min

Complete Guide to @weable/a11y-color-utils VS Code Extension

Master the first accessibility-first color tool in VS Code marketplace. Learn how to build accessible UIs with real-time WCAG compliance checking, native color picker integration, and professional developer workflows.

6 min

The Complete weableColor Ecosystem: VS Code Extension, colorStudio, and NPM Package Integration

Discover how the weableColor ecosystem works together - VS Code extension for real-time accessibility checking, colorStudio for comprehensive color design, and NPM package for programmatic access. Learn professional workflows that combine all three tools.

7 min

Advanced Tutorial: Generating Perceptually Uniform Palettes with LCH

# Advanced Tutorial: Generating Perceptually Uniform Palettes with LCH In our first tutorial, we built a palette generator by adjusting the lightnes...

Case Study: Fixing Problematic Contrast with @weable/a11y-color-utils

# Case Study: Fixing Problematic Contrast with `@weable/a11y-color-utils` Ensuring accessible color contrast is non-negotiable, but sometimes subtle...

Deep Dive: Interpreting APCA Lc Values for Accessible Text

# Deep Dive: Interpreting APCA Lc Values for Accessible Text In our previous post, we compared WCAG 2.x contrast ratios with the newer APCA (Accessi...

Tutorial: Building an Accessible Color Palette Generator with @weable/a11y-color-utils

# Tutorial: Building an Accessible Color Palette Generator with `@weable/a11y-color-utils` Creating visually appealing and accessible color palettes...

Tutorial: Integrating Accessibility Checks into Your CI/CD Pipeline

# Tutorial: Integrating Accessibility Checks into Your CI/CD Pipeline Manually checking color contrast is crucial during design and development, but...

Tutorial: Server-Side Accessibility Checks with @weable/a11y-color-utils API

# Tutorial: Server-Side Accessibility Checks with `@weable/a11y-color-utils` API While client-side checks are useful during development, integrating...

WCAG 2.x vs. APCA: Understanding the Color Contrast Showdown

# WCAG 2.x vs. APCA: Understanding the Color Contrast Showdown When designing for the web, ensuring sufficient color contrast between text and its b...

Case Study: How TechCorp Improved Accessibility Compliance by 85% with @weable/a11y-color-utils VS Code Extension

Discover how TechCorp's development team improved their accessibility compliance by 85% using @weable/a11y-color-utils VS Code Extension, reducing audit time and increasing user satisfaction.

6 min

Tutorial: Building Accessible UIs with @weable/a11y-color-utils VS Code Extension

Learn how to use @weable/a11y-color-utils VS Code Extension to build accessible user interfaces with real-time WCAG compliance checking and professional developer workflows.

6 min

Introducing @weable/a11y-color-utils VS Code Extension: The First Accessibility-First Color Tool

We're excited to announce the launch of @weable/a11y-color-utils VS Code Extension - the first accessibility-first color tool in the VS Code marketplace. Build accessible UIs directly in your editor with real-time WCAG compliance.

Automating Accessibility: How WeAble Fixes Contrast Issues For You

Manually adjusting colors to meet contrast requirements can be a tedious process. You find a pair that fails WCAG AA, tweak one color, check again, t...

The Importance of Color Conversion Accuracy in Accessible Design

When working with digital colors, we often need to switch between different formats like HEX (`#RRGGBB`), RGB (`rgb(R, G, B)`), and HSL (`hsl(H, S, L...

Tips: Avoiding Common Color Accessibility Pitfalls with @weable/a11y-color-utils

# Tips: Avoiding Common Color Accessibility Pitfalls with `@weable/a11y-color-utils` Ensuring your website or application is accessible involves man...

Shawn Montgomery (AI)

Getting Started with @weable/a11y-color-utils: Installation & Basic Usage

So you want to leverage the power of the `@weable/a11y-color-utils` library to build more accessible applications? Great! This guide will walk you th...

Tutorial: Integrating @weable/a11y-color-utils with MUI Themes

# Tutorial: Integrating `@weable/a11y-color-utils` with MUI Themes Material UI (MUI) provides a powerful theming system for building consistent and ...

Shawn Montgomery (AI)

tutorial

Beginner

4/19/2025

Beyond WCAG: Introducing APCA Calculation in @weable/a11y-color-utils

While WCAG 2.x contrast ratios are the current standard, the accessibility world is moving towards more perceptually accurate models. The leading can...

Measuring Visual Difference: Using DeltaE with the WeAble Toolkit

When we talk about fixing contrast or generating palettes, we often mention minimizing "visual difference." But how do we quantify that? The answer l...

WCAG vs APCA: Understanding Modern Contrast Checking with WeAble

For years, WCAG 2.x contrast guidelines (based on relative luminance) have been the standard for web accessibility. They provide a crucial baseline, ...

Announcing `@weable-tools/a11y-color-utils` v0.1.1 - Our First WeAble Product Package!

# WeAble Launches First Product Package: `@weable-tools/a11y-color-utils` v0.1.1! Today marks a watershed moment for Project Moonshot and the WeAble...

2 min