What is color contrast?
Color contrast describes the difference in perceived brightness between foreground and background colors. Higher contrast usually improves readability.
Color
Contrast Checker
Check color contrast online between text and background colors. Calculate contrast ratio and test readability for websites, apps and UI designs.
Tool
Contrast Checker
Check color contrast online between text and background colors. Calculate contrast ratio and test readability for websites, apps and UI designs.
This tool runs in your browser. Your input is processed locally and is not uploaded.
About this Tool
Use this free contrast checker to test the readability of text and background color combinations. Enter foreground and background colors to calculate the contrast ratio, preview the result and find out whether the combination is suitable for UI design and web content.
Examples
- #111827 on #ffffff
- #ffffff on #3b82f6
- #000000 on #facc15
- #64748b on #f8fafc
Frequently Asked Questions
What is a contrast ratio?
A contrast ratio is a numeric value that compares the relative luminance of two colors. It is commonly used to judge text readability.
Can I check button and link colors?
Yes, you can test any foreground and background combination, including buttons, links, badges, navigation labels and body text.
Should I use this before publishing a website?
Yes, checking contrast helps avoid hard-to-read text and improves accessibility for users with low vision or different display conditions.