Accessibility Colour Analyzer

Advanced Colour Contrast & Accessibility Analyzer

Colour Contrast & Accessibility Analyzer

Designed by The McLean Consulting Group

McLean Consulting Group Logo

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)