WCAG Safe Palette Builder - Online Accessible Color Sets

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. Color contrast is crucial because approximately 1 in 12 men (8%) and 1 in 200 women have some form of color vision deficiency. Poor contrast makes text unreadable for users with low vision, older adults, and people viewing screens in bright sunlight. Ensuring sufficient contrast is one of the most impactful accessibility improvements you can make.

Level	Normal Text	Large Text (18pt+ or 14pt+ bold)	UI Components
AA	≥ 4.5:1	≥ 3:1	≥ 3:1
AAA	≥ 7:1	≥ 4.5:1	≥ 3:1

AA is the generally accepted minimum standard. AAA is the enhanced standard for maximum accessibility.

WCAG uses relative luminance based on the sRGB color space. The formula converts each channel (R, G, B) from 8-bit values to linearized values, then calculates luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The contrast ratio is (L₁ + 0.05) / (L₂ + 0.05), where L₁ is the lighter color's luminance and L₂ is the darker color's luminance. This tool performs all calculations in real-time using the official WCAG 2.1 algorithm.

AA is the mid-range standard that most organizations target. It requires a 4.5:1 contrast ratio for normal text, which covers the needs of most users with moderate visual impairments. AAA is the highest standard, requiring 7:1 for normal text — this is significantly stricter and limits design choices. AAA is recommended for sites serving primarily elderly users, people with low vision, or where reading comprehension is critical (e.g., government, healthcare, legal documents).

Yes! You don't need to abandon your brand palette. The key is to create accessible pairings within your brand colors. Use your brand color as a background and pair it with a sufficiently contrasting neutral (white, off-white, dark gray, or black) for text. Alternatively, use darker/lighten variants of your brand colors. This tool's "Lock" feature lets you lock your brand color and find compatible partners that preserve your brand identity while meeting WCAG standards.

Yes. Under WCAG 2.1, UI components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors. This includes button borders, input field outlines, icon shapes, focus indicators, and chart elements. For text inside buttons, the standard text contrast requirements apply (4.5:1 for AA). This tool helps you verify both text and UI component contrast.

• Relying solely on color to convey information (e.g., red for errors without an icon or text label).
• Gray text on white backgrounds — light gray (#999) on white fails AA with only ~2.8:1 contrast.
• Overlaying text on images without a sufficient contrast backdrop or overlay.
• Ignoring focus indicators — keyboard users need visible focus outlines with 3:1+ contrast.
• Using similar hues that appear distinct to you but are indistinguishable to colorblind users (e.g., red/green for status).

Mathematically, there are millions of color pairs that meet WCAG AA standards. Out of the 16.7 million possible 24-bit colors, approximately 60-70% of randomly paired combinations will fail AA contrast. However, by intelligently constraining luminance differences (as this tool does), you can reliably generate compliant palettes. The key insight: contrast is primarily about luminance difference, not hue difference. A bright yellow and a dark blue may contrast well, but so can two shades of the same hue if their brightness differs enough.