weableColor Blog
Insights, tutorials, and updates about accessible color utilities
Advanced APCA Techniques & Considerations with @weable/a11y-color-utils
Tips & Tricks: Advanced APCA Techniques & Considerations The Accessible Perceptual Contrast Algorithm (APCA) offers a more nuanced way to evaluate tex…
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 consistently acc…
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 (like…
weableColor is live on Figma Community
Figma approved weableColor. Install the accessibility-first plugin from Community — Mission Control, Live Inspector, in-file fixes, CVD preview, and CSV export.
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.
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.
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.
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.
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 lightness of…
Case Study: Fixing Problematic Contrast with @weable/a11y-color-utils
Case Study: Fixing Problematic Contrast with Ensuring accessible color contrast is non-negotiable, but sometimes subtle issues slip through. This case…
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 (Accessible…
Tutorial: Building an Accessible Color Palette Generator with @weable/a11y-color-utils
Tutorial: Building an Accessible Color Palette Generator with Creating visually appealing and accessible color palettes is crucial for inclusive desig…
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 aut…
Tutorial: Server-Side Accessibility Checks with @weable/a11y-color-utils API
Tutorial: Server-Side Accessibility Checks with API While client-side checks are useful during development, integrating accessibility checks into your…
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 backg…
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.
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.
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, tw…
The Importance of Color Conversion Accuracy in Accessible Design
When working with digital colors, we often need to switch between different formats like HEX (), RGB (), and HSL (). While these formats represent the…
Tips: Avoiding Common Color Accessibility Pitfalls with @weable/a11y-color-utils
Tips: Avoiding Common Color Accessibility Pitfalls with Ensuring your website or application is accessible involves many factors, and color contrast i…
Getting Started with @weable/a11y-color-utils: Installation & Basic Usage
So you want to leverage the power of the library to build more accessible applications? Great! This guide will walk you through the installation and b…
Tutorial: Integrating @weable/a11y-color-utils with MUI Themes
Tutorial: Integrating with MUI Themes Material UI (MUI) provides a powerful theming system for building consistent and visually appealing React applic…
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 cand…
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 li…
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, e…
Announcing `@weable-tools/a11y-color-utils` v0.1.1 - Our First WeAble Product Package!
WeAble Launches First Product Package: v0.1.1! Today marks a watershed moment for Project Moonshot and the WeAble initiative! We are incredibly excite…
Categories
- All Posts
27 posts
- Tutorials
19 posts
- Case Studies
2 posts
- Tips & Tricks
3 posts
- VS Code Extension
0 posts
- colorStudio
3 posts
- Ecosystem
0 posts