nTropi

Color Contrast Checker (WCAG)

Calculate the contrast ratio of text and background colors to ensure your design is accessible and meets WCAG standards.

Real-time Ratio Calculation
WCAG AA & AAA Validation
Text & UI Component Checks
Live Visual Preview
Hex Color Inputs

  • Enter Colors:
    • Enter hex codes (e.g., #FFFFFF) for Background and Text.
    • Or run the color picker by clicking the color square.
  • Check Results:
    • View the calculated Contrast Ratio instantly.
    • Check the Pass/Fail status for Normal Text, Large Text, and UI Components.
  • Preview:
    • See a real-time preview of your color combination on the right.
    • Use the "Swap" button to reverse foreground and background.

  • Instant Feedback: Ratios update immediately as you type or pick colors.
  • Detailed Breakdown: Distinct checks for AA (Minimum) and AAA (Enhanced) levels.
  • UI Component Support: Checks non-text contrast for buttons and icons (3:1 requirement).
  • Visual Simulation: See how your text looks at different sizes and weights.

Other Tools