WCAG 2.1 (Web Content Accessibility Guidelines) is an international standard developed by the W3C that defines how to make web content more accessible to people with disabilities. Color contrast is crucial because approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Adequate contrast ensures that text, UI components, and graphical objects are distinguishable by users with low vision, color blindness, or those viewing content in challenging lighting conditions. Meeting WCAG contrast requirements is also a legal requirement in many jurisdictions under accessibility laws like the ADA, Section 508, and EN 301 549.

WCAG 2.1 defines the following minimum contrast ratios:

Level AA (minimum):

• Normal text (under 18pt/24px, or under 14pt/18.7px bold): 4.5:1
• Large text (18pt/24px+ or 14pt/18.7px+ bold): 3:1
• UI components and graphical objects: 3:1

Level AAA (enhanced):

• Normal text: 7:1
• Large text: 4.5:1

The maximum possible contrast ratio is 21:1 (pure black on pure white). AAA is the gold standard but is not required for most web content — AA compliance is the typical legal benchmark.

The contrast ratio is calculated using the relative luminance of the two colors, as defined by WCAG 2.1:

Step 1: Convert sRGB values (0–255) to linear RGB by applying gamma expansion. Values ≤ 0.04045 are divided by 12.92; larger values use the formula ((v + 0.055) / 1.055)^2.4.
Step 2: Calculate relative luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. The coefficients reflect human perception — green contributes the most to perceived brightness.
Step 3: Contrast ratio = (L₁ + 0.05) / (L₂ + 0.05), where L₁ is the lighter luminance and L₂ is the darker. The +0.05 offset prevents division by zero.

This formula ensures the ratio reflects human visual perception, not just mathematical differences between color values.

WCAG defines large text as:
• 18 point (24px) or larger — regardless of weight
• 14 point (18.7px) or larger — but only if bold (700 weight or above)

These thresholds are based on typical CSS pixel sizes. When using relative units like em or rem, 18pt ≈ 24px at standard 96dpi resolution. Large text benefits from a lower contrast threshold (3:1 for AA, 4.5:1 for AAA) because larger characters are inherently easier to discern. However, many designers aim for 4.5:1 across all text for consistency and broader accessibility.

This is a common challenge. Here are practical solutions:

1. Adjust lightness: Keep the hue and saturation of your brand color but darken or lighten it until sufficient contrast is achieved. Even small adjustments can make a big difference.
2. Use for large text only: A color that fails for body text may still work for headings (≥24px or ≥19px bold).
3. Create an accessible variant: Many brands maintain a primary palette (for large elements) and an accessible palette (for text on backgrounds).
4. Add borders or underlines: For links and interactive elements, additional visual cues beyond color help meet WCAG Success Criterion 1.4.1 (Use of Color).
5. Invert the relationship: If your brand color is mid-tone, use it as the background with white/dark text instead.

Use this tool's Auto-Fix feature to instantly find accessible alternatives that preserve your brand's hue.

Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum contrast ratio of 3:1 for:
• UI component boundaries (button borders, input outlines, focus indicators)
• Icons and graphical objects essential for understanding content
• State indicators (selected tabs, toggles, progress bars)

This applies to all visual information needed to identify and operate user interface controls. There are exceptions for decorative elements, disabled controls, and logos/brand names. When designing buttons, ensure either the background fill or the border has 3:1 contrast against adjacent colors.

The most frequent contrast pitfalls include:

1. Gray text on light backgrounds: Light gray (#999 or lighter) on white backgrounds almost always fails AA. Body text should generally be no lighter than #767676 on white.
2. White text on bright colors: White text on yellow, lime green, or light blue backgrounds often fails. These combinations have low luminance contrast.
3. Text over images: Placing text directly on photographs without an overlay or scrim is a leading cause of contrast failures.
4. Low-contrast placeholders: Form placeholder text often uses light gray that fails contrast minimums.
5. Ignoring hover/focus states: Interactive elements need visible state changes with adequate contrast.
6. Relying on color alone: Using only color to convey meaning (e.g., red for errors) without icons or text labels fails WCAG 1.4.1.

Always test your color combinations with a tool like this one before finalizing your design.

Yes, this tool is completely free with no registration required. All color calculations are performed locally in your browser using JavaScript. No data is ever sent to any server or stored. Your color choices, contrast checks, and session history remain entirely private on your device. You can use this tool for unlimited color checks without any limitations. Feel free to bookmark this page for quick access during your design workflow.