Real-Time Contrast Checker

Instructions

  1. Set colors: Input your foreground and background color codes or use the color picker square.
  2. Check results: See if the contrast meets your project’s criteria in the results section.
  3. Adjust (if needed): If the contrast fails, fine-tune the colors using the luminance slider until it passes.

Input

☀️ 🌘
Swap color
☀️ 🌘

Results

Contrast ratio --
WCAG AA
WCAG AA requires minimum contrast for readability. This section shows if your colors meet those requirements.
WCAG AAA
WCAG AAA is the highest level of contrast requirement. This section shows stricter criteria for accessible design.