AlpaKit / design / Color Contrast & Accessibility Checker

Color Contrast & Accessibility Checker

Calculate text & background contrast ratio based on WCAG 2.1 standards, fix colors automatically, extract color palettes from drag-and-drop images, and simulate color blindness.

⚖️ Color Contrast Analyzer (WCAG 2.1)

Text Color

Background Color

Contrast Ratio

12.3:1

WCAG 2.1 AA

PASS

WCAG 2.1 AAA

PASS

Component Real-time Preview

This is a sample text used to test color readability. Proper contrast helps everyone read web content easily.

✨ Smart Contrast Fix

One-click text color auto-adjustment to meet AA (4.5:1) standards

👁️ Image Color Blindness Simulator

📤 Drag & drop image here or click to upload Supports PNG, JPG, WebP. Processed locally in your browser.

Visual Simulation Type

📚 Web Color Accessibility Guide (WCAG 2.1)

AA Level: Normal text requires a contrast of 4.5:1+, large text (18pt+) requires 3:1+.
AAA Level: Normal text requires a contrast of 7:1+, large text requires 4.5:1+.
相對亮度 (Luminance) 指的是顏色的視覺明度，介於 0 (最暗的黑色) 到 1 (最亮的白色) 之間。