Developer tools
Color Contrast Checker
Calculate a contrast ratio from two hex colors locally and compare it with common WCAG AA thresholds. Test the actual rendered interface as well.
Your generated result will appear here.
Use the result safely
Calculate a contrast ratio from two hex colors locally and compare it with common WCAG AA thresholds. Test the actual rendered interface as well. Review generated links and code before publishing them.
Color Contrast Checker FAQ
No. Contrast is only one part of accessibility. Check focus states, text size, non-text contrast, motion, and keyboard use too.
Use six-digit hexadecimal colors such as #111827 or #ffffff.