Skip to content

Color Contrast Checker

Calculate contrast ratios between foreground and background colors. Get instant pass/fail results for WCAG 2.1 AA, WCAG 2.2 AA, and WCAG AAA standards. Preview text in real-time and copy CSS-ready values.

Why This Matters

Color contrast affects readability for users with low vision, color blindness, or situational impairments like bright sunlight. WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Poor contrast is one of the most common WCAG violations found on the web.

How to Use This Tool

  1. 1

    Enter colors

    Type hex values or use the color pickers for foreground and background colors.

  2. 2

    Review results

    The tool instantly shows the contrast ratio and pass/fail status for WCAG AA and AAA levels.

  3. 3

    Adjust if needed

    Use the lightness slider or click 'Suggest compliant color' to get a nearest compliant alternative.

  4. 4

    Copy CSS

    Copy the ready-to-use CSS color values for your stylesheet.

Frequently Asked Questions

What is a good contrast ratio?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1 under WCAG 2.1.

What is APCA?

APCA (Accessible Perceptual Contrast Algorithm) is a proposed WCAG 3.0 contrast model that accounts for how humans actually perceive contrast, including text size and weight. It is more accurate than the current WCAG 2.x ratio but not yet a legal standard.

Does this tool support alpha transparency?

Yes. Enter an alpha value (0-1) for the foreground color and the tool will compute the effective blended color against the background before calculating the contrast ratio.

Is my data sent to a server?

No. All calculations happen entirely in your browser. No color values are transmitted or stored.

Related Tools

WCAG Checklist

Interactive checklist with all 86 WCAG 2.2 success criteria. Track progress, filter by level, and export your audit results.

Heading Analyzer

Paste your HTML and visualize the heading hierarchy. Detect skipped levels, missing H1s, and structural issues.

Form Checker

Check HTML forms for missing labels, improper associations, and other WCAG form accessibility violations.

HTML Scanner

Paste HTML and get an instant accessibility audit. Checks for missing alt text, ARIA issues, semantic HTML problems, and more.