Contrast Checker

Check WCAG 2.1 contrast ratios and accessibility compliance for text and UI elements.

Contrast Checker

Calculate WCAG 2.1 contrast ratios for normal text, large text, and user interface elements.

Color Configuration
Text (Foreground)
Background
Common Pairings
Contrast Ratio17.74:1
Normal TextBody text under 18pt
AA (Pass)AAA (Pass)
Large TextHeadings 18pt+ or 14pt+ bold
AA (Pass)AAA (Pass)
UI ComponentsIcons, borders, form controls
AA (Pass)
Visual Rendering Preview

Large Heading Sample (24px Bold)

This is regular body text rendered at 16px. The quick brown fox jumps over the lazy dog. Accessible color contrast ensures content can be read comfortably by people with moderately low vision.

Secondary Element
WCAG 2.1 Contrast Guidelines

• Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt or 14pt bold).

• Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

• UI Components & Graphical Objects require at least 3:1 contrast against adjacent colors.

About Contrast Checker

Evaluate foreground and background color combinations according to WCAG 2.1 accessibility guidelines. Test AA and AAA criteria for normal text, large text, and interface components.

Related Tools