the IT Hustle
ToolsPricingBlogAbout

WCAG Contrast Checker

Enter foreground and background colors and instantly see your WCAG 2.1 contrast ratio with AA/AAA pass/fail badges. Get color suggestions when contrast fails, and preview how text looks in a real UI.

Foreground (Text)
HEX
R
G
B
Background
HEX
R
G
B
Contrast Ratio
14.0:1
Excellent — AAA
✓
AA Large Text
Requires ≥ 3:1
✓
AA Normal Text
Requires ≥ 4.5:1
✓
AAA Large Text
Requires ≥ 4.5:1
✓
AAA Normal Text
Requires ≥ 7:1
Contrast Scale
AA (4.5)
AAA (7)
1:121:1
Live Preview
AppName
HomeAboutContact

Large Heading Text (24px+)

This is normal body text at 16px. Good contrast ensures all users can read your content comfortably, including those with visual impairments. WCAG guidelines define minimum contrast ratios to guarantee readability.

Small text (12px) requires even higher contrast to remain legible.

Link text
Placeholder text...
Popular Palettes

How to Check Color Contrast for Accessibility

Verify WCAG 2.1 color contrast compliance using The IT Hustle's free Contrast Checker.

  1. 1
    Enter your colorsSet the foreground (text) and background colors using the color pickers or by typing hex/RGB values.
  2. 2
    Check the ratioThe contrast ratio is calculated automatically. WCAG AA requires 4.5:1 for normal text, 3:1 for large text.
  3. 3
    Review compliance badgesSee pass/fail badges for WCAG AA Normal, AA Large, AAA Normal, and AAA Large text standards.
  4. 4
    Fix failing colorsIf contrast fails, use the suggested colors that meet the minimum ratio. Click a suggestion to apply it instantly.

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) 2.1 is the international standard for web accessibility. It defines minimum contrast ratios to ensure text is readable for people with low vision or color blindness.

AA is the minimum standard most sites should meet: 4.5:1 for normal text, 3:1 for large text. AAA is the enhanced standard: 7:1 for normal text, 4.5:1 for large text. AAA is recommended but not always required.

Large text is defined as 18pt (24px) or 14pt (18.67px) bold. Large text has a lower contrast requirement because it's easier to read at lower contrast ratios.

Related Tools

Color Palette GeneratorColor ConverterCSS Gradient Generator