Colour Contrast & Accessibility Analyzer
Designed by The McLean Consulting Group
Check color contrast ratios and WCAG compliance
How to Use the Color Contrast Analyzer
1. Use the color pickers to select the foreground and background colors of your choice. 2. The contrast ratio will be calculated automatically and displayed above. 3. Use the Eyedropper tool (if supported by your browser) to pick colors directly from anywhere on your screen. 4. The preview area will update in real-time to show how your selected colors appear together.
Foreground Color
Background Color
Accessible Color Presets:
Contrast Results
21:1
Contrast Ratio:
Normal Text: Checking...
Large Text: Checking...
UI Components: Checking...
Preview Text - The quick brown fox jumps over the lazy dog.
Sample Text Sizes
Normal text (16px)
Large text (18.66px)
Heading text (24px)