Random Accessible Palette Generator

WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility developed by the W3C. Color contrast is critical because approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Adequate contrast ensures that text, icons, and UI components are distinguishable by users with visual impairments, in bright sunlight, or on low-quality screens. WCAG 2.1 defines specific contrast ratios: 4.5:1 for normal text (AA), 7:1 for normal text (AAA), 3:1 for large text (AA), and 3:1 for UI components.

Our generator creates colors in the HSL color space and calculates the relative luminance of each color using the WCAG 2.1 formula. It then computes contrast ratios against pure white (#FFFFFF) and pure black (#000000) to provide you with immediate feedback. Each color card displays whether it passes AAA (7:1+), AA (4.5:1+), AA Large (3:1+), or fails contrast requirements. The contrast matrix further shows pairwise ratios so you can confidently pair any two colors from the palette.

• AAA (7:1+) – Enhanced contrast, suitable for all text sizes including small body copy. Gold standard for accessibility.
• AA (4.5:1+) – Minimum contrast for normal text (under 18px or 14px bold). Passes legal accessibility requirements in most jurisdictions.
• AA Large (3:1+) – Sufficient for large text (18px+ or 14px+ bold) and UI components like buttons, form borders, and icons.
• Fail (<3:1) – Does not meet WCAG requirements. Avoid using this combination for text or important UI elements.

Click the lock icon on any color card to preserve that color when generating a new palette. Locked colors stay fixed while others change. Use the Settings panel to adjust lightness ranges, saturation levels, and switch between generation strategies: Balanced (evenly distributed tones), Vibrant (higher saturation), Muted (softer, desaturated), and Deep Tones (richer, darker shades). You can also change how many colors appear in the palette (4–7).

The WCAG contrast ratio is calculated using relative luminance. First, each RGB channel is linearized using gamma correction: if the sRGB value ≤ 0.03928, it's divided by 12.92; otherwise, it's raised to the power of 2.4 after scaling. Then relative luminance L = 0.2126×R + 0.7152×G + 0.0722×B (reflecting human perception where green appears brightest). Finally, contrast ratio = (L_light + 0.05) / (L_dark + 0.05), yielding a value from 1:1 (identical) to 21:1 (pure black vs pure white).

Absolutely! All colors generated by this tool are completely free to use in any project — commercial, personal, or open source. There are no restrictions, attribution requirements, or licensing limitations. The hex codes are simply mathematical outputs from a random generation algorithm. We encourage you to export them as CSS variables or copy them directly into your design files, style sheets, and design systems.