ToolPuma Logo

WCAG Contrast Checker

Verify WCAG AA and AAA contrast compliance.

Large text — WCAG guidelines

Accessibility is important for inclusive design.

5.17:1

WCAG contrast ratio

Normal text (AA)

Minimum 4.5:1

PASS

Normal text (AAA)

Minimum 7:1

FAIL

Large text (AA)

Minimum 3:1

PASS

Large text (AAA)

Minimum 4.5:1

PASS

UI components & graphics

Minimum 3:1

PASS

What Is a WCAG Contrast Checker?

The WCAG Contrast Checker is a complete accessibility audit tool for text and UI color combinations. It computes the exact WCAG 2.x contrast ratio and reports pass or fail for normal text, large text, and UI components against both AA and AAA conformance levels, with a clear color preview. This is the tool to use when validating that your interface meets web accessibility guidelines.

How to Use This WCAG Contrast Checker

  1. 1
    Enter a foreground and a background color in the color controls.
  2. 2
    Read the computed contrast ratio and its conformance summary.
  3. 3
    Review the per-level tablenormal/large text and UI components against AA and AAA.
  4. 4
    Adjust colors until every row reads PASS.

Frequently Asked Questions

AA is the minimum commonly required conformance level, while AAA is a higher, stricter level. WCAG Contrast Checker reports both, so you can target the right standard for your project.
WCAG defines large text as at least 18 points (about 24px) regular weight, or at least 14 points (about 19px) bold.
Yes. The UI components & graphics row reports whether graphical objects such as icons, buttons with borders, and focus indicators meet the 3:1 requirement.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

More Color & Design Tools

CSS Border Generator

Style borders with width, style, color, and radius.

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.