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 an online accessibility tool designed for developers and designers who need a more detailed check of text and interface color combinations. Enter a foreground and background color to calculate the WCAG 2.x contrast ratio and review results for normal text, large text, and applicable UI components at AA and AAA levels. The detailed results make it useful when building accessible websites, design systems, forms, dashboards, buttons, navigation elements, and component libraries.

How to Use This WCAG Contrast Checker

  1. 1
    Enter the foreground colorChoose the text, icon, border, or other meaningful foreground color.
  2. 2
    Enter the background colorSelect the surface behind the foreground element.
  3. 3
    Read the contrast ratioReview the calculated ratio and the overall accessibility result.
  4. 4
    Check each WCAG categoryCompare normal text, large text, and applicable UI components against AA and AAA requirements.
  5. 5
    Adjust and retestChange the foreground or background color until the required rows show PASS for your project's target level.

Frequently Asked Questions

AA is the commonly targeted minimum conformance level for most websites and applications, while AAA has stricter requirements. A project may target different levels for different content, but WCAG compliance should be evaluated according to the applicable criteria.
WCAG 2.x generally defines large text as at least 18pt regular weight, or at least 14pt bold. In CSS terms, these values are approximately 24px and 18.67px respectively, although font rendering and actual styling should be considered.
Yes, applicable non-text UI components and meaningful graphical objects can have contrast requirements. The exact requirement depends on what the visual element communicates and which WCAG criterion applies.
It is a numerical comparison of the relative luminance of two colors. The ratio helps determine whether foreground content can be sufficiently distinguished from its background according to WCAG requirements.
AAA provides a higher level of contrast, but it is not universally required for every piece of content. Many websites target AA as the practical baseline while using stronger contrast where readability is especially important.
No. Color contrast is only one part of accessibility. A complete accessibility review should also consider keyboard navigation, focus visibility, semantic HTML, labels, screen-reader support, text alternatives, interaction states, and other applicable WCAG criteria.

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.