Color Contrast Checker

Check WCAG color contrast compliance

CheckersFreeNo Signup
4.6(803 reviews)
All Tools

Loading tool...

About Color Contrast Checker

A WCAG color contrast checker that calculates the contrast ratio between foreground and background colors. Tests compliance with WCAG 2.1 Level AA (4.5:1 for normal text, 3:1 for large text) and Level AAA (7:1 and 4.5:1). Provides a live text preview, supports hex and RGB input, and suggests accessible color alternatives when the ratio is insufficient. Essential for web designers, developers, and accessibility professionals ensuring inclusive design.

Color Contrast Checker Features

  • WCAG AA/AAA
  • Live preview
  • Contrast ratio
  • Color suggestions
  • Hex & RGB input
Color contrast is a fundamental aspect of web accessibility. The Web Content Accessibility Guidelines (WCAG) 2.1 specify minimum contrast ratios to ensure text is readable by people with visual impairments, including color blindness and low vision. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency.

How to Use

Enter two colors:

  • Foreground: Text/icon color
  • Background: Background color
  • View the contrast ratio and WCAG compliance

WCAG Compliance Levels

  • AA Normal: 4.5:1 ratio minimum
  • AA Large: 3:1 ratio minimum (18pt+ or 14pt bold)
  • AAA Normal: 7:1 ratio minimum
  • AAA Large: 4.5:1 ratio minimum

Contrast Ratio Formula

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 is the darker. Relative luminance uses linearized sRGB values weighted by human perception.

Step-by-Step Instructions

  1. 1Enter the foreground (text) color.
  2. 2Enter the background color.
  3. 3View the contrast ratio.
  4. 4Check AA and AAA compliance.
  5. 5Adjust colors if needed.

Color Contrast Checker — Frequently Asked Questions

What contrast ratio should I aim for?+

Minimum AA (4.5:1) for most text. Target AAA (7:1) for critical content. Large text (18pt+) can use 3:1 for AA. When in doubt, aim higher — 7:1+ ensures readability for virtually all users.

Does this apply to images and icons?+

WCAG contrast requirements primarily apply to text. However, WCAG 2.1 Success Criterion 1.4.11 requires 3:1 contrast for UI components and graphical objects that convey information.

Why does white text on light gray fail?+

White (#FFFFFF) on light gray (#CCCCCC) has only a 1.6:1 ratio — far below the 4.5:1 minimum. The human eye struggles to distinguish low-contrast text, especially in non-ideal lighting or on mobile screens.

More Checkers Tools

Explore all 223 other checkers tools available on Generatr

Academic Readability Graderads.txt ValidatorAI Content DetectorAlexander McQueen Serial Number CheckerAnagram CheckerAnalog Gem Tester SimulatorAnsible LinterArc-Transitive Graph CheckerAudemars Piguet Serial Number CheckerAuto Parts Compatibility CheckerBike Serial Number CheckerBlocked Checker TwitterBluesky Block CheckerBottega Veneta Serial Number CheckerBrawl Stars Mastery CheckerBulk SERP CheckerBulova Serial Number CheckerCanned Phrase & Cliche CheckerCar Stereo Compatibility CheckerCartier Love Bracelet Serial Number CheckerCartier Serial Number CheckerCeline Serial Number CheckerCetaphil Lot Number CheckerCGC Certification LookupCharacter Frequency CounterChordal Graph CheckerCircleboom Shadowban CheckerClash Royale Deck CheckerClash Royale Synergy CheckerCograph Recognition Checker
View all 223 checkers tools
Share this tool: