Color Contrast Checker

🎯 Step-by-Step Guide:

1. Enter Text Color: Paste or type a color value (e.g., #000000) into the Text Color input.
2. Enter Background Color: Paste or type a color value into the Background Color input.
3. Live Preview: Instantly see how your text will look on the selected background in the live preview area.
4. Check Ratings: Below the preview, you'll see:
   • Contrast Ratio (e.g., 10.62)
5. Adjust Colors: Use the buttons to auto-adjust:
   • Adjust Both: Resets both text and background to accessible defaults.
   • Adjust Background: Changes only the background to improve contrast.
   • Adjust Text: Changes only the text color.

✅ Best Practices:

• Maintain a contrast ratio of at least 5+.
• Don't rely on color alone — add icons, labels, or shapes for users with color vision deficiencies.

This tool helps ensure your content is readable and accessible to everyone, including users with visual impairments. It’s especially useful for web designers, developers, and accessibility testers.