Color Contrast Checker

Check if your foreground and background color combination meets WCAG 2.1 accessibility standards. Get the exact contrast ratio, AA/AAA pass/fail status, and accessible color suggestions.

Foreground Color (Text)
RGB: 255, 255, 255
Background Color
RGB: 31, 31, 31
—
Contrast Ratio
—
AA — Normal Text
Requires 4.5:1
—
—
AA — Large Text
Requires 3:1
—
—
AAA — Normal Text
Requires 7:1
—
—
AAA — Large Text
Requires 4.5:1
—
Sample Heading Text
This is how your body text will look with the selected color combination. Good contrast helps all users read your content clearly.
Small text (12px) — this is the hardest to read at low contrast.
Button Label
Suggested Accessible Text Colors

How to Use the Color Contrast Checker

  1. Enter your foreground color: Click the color swatch or type a hex code (e.g., #333333) for your text color. Use the lightness slider to adjust the shade.
  2. Enter your background color: Set your page or component background color the same way. The contrast ratio updates instantly.
  3. Read the WCAG results: You'll see four compliance checks — AA Normal, AA Large, AAA Normal, and AAA Large. Green = pass, Red = fail. Aim for at least AA compliance on all interactive elements.
  4. Preview your text: The live preview shows how your heading, body text, small text, and button look with the chosen colors — before you write a single line of CSS.
  5. Try accessible suggestions: If you fail AA compliance, click any of the suggested text colors below the preview. These are pre-calculated to pass WCAG AA (4.5:1) against your background.

Frequently Asked Questions

WCAG 2.1 defines three levels: A, AA, and AAA. Level AA (minimum standard for most websites) requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt regular or 14pt bold). Level AAA (stricter) requires 7:1 for normal text and 4.5:1 for large text. Most jurisdictions and accessibility audits check for AA compliance.
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Relative luminance converts RGB values to a linear scale using gamma correction, as defined in WCAG 2.1 Success Criterion 1.4.3.
Large text is defined as at least 18 point (24px) in regular weight, or at least 14 point (approximately 18.67px) in bold weight. Most body text and UI labels are considered "normal text" and need to pass the stricter 4.5:1 ratio. Decorative text, logos, and inactive UI components are exempt.
In many countries, yes. The US ADA (Americans with Disabilities Act), the EU Web Accessibility Directive (for government and public sector sites), and India's GIGW guidelines reference WCAG AA compliance as the standard. Failure to comply can result in lawsuits, especially for e-commerce, government, and banking websites.
Yes. Simply check both combinations: your light-mode foreground/background pair AND your dark-mode pair separately. Each combination must independently pass WCAG AA. Use the Swap button to quickly test both directions of a color pairing.
Yes, completely free. No data is stored or sent to any server. All contrast calculations happen entirely in your browser using JavaScript. Nothing is tracked or saved after you close the tab.

Related Tools