Contrast Checker (WCAG)

Test color contrast for accessibility. Enter foreground and background colors to get the contrast ratio and WCAG AA/AAA results for normal and large text, plus a quick preview for UI readability.

Contrast Checker (WCAG)

Examples: #000, #112233, rgb(17,34,51), 17,34,51
WCAG uses different thresholds for normal vs large text.

WCAG Contrast Checker (AA/AAA) for Accessible Design

Readable text and accessible UI start with proper contrast. Contrast Checker (WCAG) calculates the contrast ratio between a foreground and background color and shows whether it passes WCAG AA/AAA requirements for both normal and large text.

What this tool does

  • Calculates contrast ratio instantly from two colors
  • Shows WCAG AA / AAA pass/fail for normal text and large text
  • Accepts common formats like HEX and RGB
  • Provides a simple preview so you can judge readability quickly

When to use a contrast checker

  • Buttons, links, and form labels (UI components)
  • Body text on backgrounds (web pages, landing pages)
  • Brand colors used for text overlays
  • Design handoff checks between design and development

Quick tips

  • If a pair fails, try darkening the text or lightening the background slightly.
  • Check multiple states: hover, disabled, and active.
  • Don’t rely on color alone—use icons, labels, or underline for important UI signals.

No sign-up required. Works on mobile and desktop.

FAQ

Yes. This tool is free to use. Some pages may show ads to support hosting and development.

No account is required. The goal is to keep tools quick and accessible.

Yes — sharing helps others discover useful tools, and it supports ongoing development.

Contrast ratio measures how different two colors are in perceived brightness. Higher ratios are easier to read and more accessible, especially for users with low vision.

WCAG AA is the most commonly targeted level for websites and apps. AAA is stricter and is usually applied to critical content or highly accessible products.

Larger text is easier to read, so WCAG allows a slightly lower contrast ratio for large headings or bold large labels compared to small body text.

You can enter common color formats such as HEX (e.g. #112233) and RGB (e.g. rgb(17,34,51)). The tool will calculate the ratio from the two colors you provide.

Category: Design & Color Tools — free online tools that run directly in your browser.