🎨 Accessible Color Scale Builder

A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. Together they form a color scale essential for building consistent UI design systems — from backgrounds to borders to text.

WCAG (Web Content Accessibility Guidelines) defines contrast ratio as the luminance difference between two colors. It ranges from 1:1 (identical) to 21:1 (black/white). Sufficient contrast ensures that text is readable by users with visual impairments. AA requires 4.5:1 for normal text, while AAA requires 7:1.

Use lighter tints (50–400) for backgrounds, hover states, and subtle accents. The base color (500) works well for primary buttons and interactive elements. Darker shades (600–900) are ideal for text, borders, and active states. Always pair with the recommended foreground color (white or black) shown on each swatch to maintain accessibility.

Contrast ratio uses relative luminance per the sRGB standard. Each color channel is linearized, then combined: L = 0.2126×R + 0.7152×G + 0.0722×B. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 ≥ L2. This tool does all calculations in real-time using the official WCAG 2.1 formula.

AA (minimum): 4.5:1 for normal text, 3:1 for large text (≥18px bold or ≥24px). AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Most websites aim for AA compliance as it covers the majority of accessibility needs while allowing more design flexibility.

Yes! You can enter shorthand HEX like #3af or 3af and it will be expanded to the full 6-digit format #33AAFF. The tool accepts both formats with or without the # prefix.