What is Accessible Palette?

Accessible Palette challenges traditional color system methodologies by advocating the shift from HSL (Hue, Saturation, Lightness) to a more perceptually accurate model. HSL, commonly used in design tools, fails to accurately represent human perception of lightness and contrast, leading to inconsistencies, especially when adhering to Web Content Accessibility Guidelines (WCAG). Accessible Palette utilizes the CIELAB color model, which aligns with human vision, ensuring colors with the same specified lightness have consistent perceived lightness and meet WCAG contrast ratios. The platform works by using the chroma.js library to generate color ranges with consistent lightness between levels. Users can start with their brand colors or default palette, adjust chroma and hue, and calculate color ranges in either RGB or CIELAB. This approach allows for a gradual hue shift within the color range, ensuring consistent contrast and lightness. Accessible Palette also facilitates contrast ratio calculations against various backgrounds, adhering to current and upcoming WCAG recommendations. Each palette created has a unique URL for future reference, making it a valuable tool for designers aiming to create accessible and visually coherent color systems.