WCAG Contrast Checker - Color Accessibility Tool

Check color contrast ratios for WCAG compliance. Test AA/AAA levels for normal and large text. Live preview with suggestions. Browser-based, private.

Foreground Color (Text)

Background Color

Contrast Ratio

21:1

WCAG Compliance

AA Normal Text PASS

Requires 4.5:1 minimum

AA Large Text PASS

Requires 3:1 minimum

AAA Normal Text PASS

Requires 7:1 minimum

AAA Large Text PASS

Requires 4.5:1 minimum

Live Preview

The quick brown fox jumps over the lazy dog. This is normal text (16px) displayed with your selected colors to test readability and contrast.

Large Text Preview (24px)

HSL/HSLA to HEX Color Code Converter

RGB/RGBA to HEX Converter - CSS Color Co…

HEX to CMYK Converter - Web Colors to Pr…

HSL/HSLA to RGB/RGBA Converter with Slid…

RGB to CMYK Converter - Screen to Print …

View all Color palettes →

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. The contrast ratio ranges from 1:1 (same color) to 21:1 (black on white).

AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. AA is the legal standard in many countries; AAA provides better accessibility.

Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because it's easier to read at lower contrast ratios.

The formula compares relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker. Luminance accounts for human perception of different colors (green appears brighter than blue at equal RGB values).

Large text has lower requirements (3:1 for AA vs 4.5:1 for normal text) because larger fonts are easier to read at lower contrast. If you fail normal text but pass large text, consider using larger font sizes or adjusting colors.

Yes. AA is the widely accepted standard and required by laws like ADA, Section 508, and European accessibility regulations. AAA is optional enhanced compliance recommended for text-heavy content or elderly audiences.

Lighten the background, darken the text, or both. The tool suggests adjusted colors that pass. Small adjustments to lightness often suffice—you don't need to switch to pure black/white.

WCAG contrast requirements apply to text. For UI components and graphics, WCAG 2.1 requires 3:1 contrast. For images containing text, run OCR first or manually check key text elements.

Test the lowest-contrast point where text appears. If your background is a gradient from light to dark, test text contrast against the lightest part. For complex patterns, test against the dominant color or avoid placing text on busy backgrounds.

Use browser extensions like axe DevTools or WAVE, or automated testing tools. This tool is ideal for checking individual color pairs during design. For production sites, combine manual checks with automated accessibility audits.

WCAG Contrast Checker - Color Accessibility Tool

WCAG Compliance

Live Preview

Suggested Fixes (Click to Apply)

Related Tools