Trình kiểm tra độ tương phản màu
Color contrast checker: calculate contrast per WCAG 2.1 and AA/AAA pass with picker and replacement suggestions for accessible design.
Cách sử dụng
Chọn hoặc nhập màu nền trước và màu nền sau, trang web sẽ cung cấp tỷ lệ tương phản và tình trạng đạt WCAG AA/AAA theo thời gian thực, đồng thời xem trước hiệu ứng thực tế.
Overview
Color Contrast Checker is a color tool that Color contrast checker: calculate contrast per WCAG 2.1 and AA/AAA pass with picker and replacement suggestions for accessible design. It runs 100% in your browser with no upload, so you get instant results with privacy. Whether you need a quick answer or batch processing with precise control, you can enter, validate and export in seconds. The UI is responsive on mobile, tablet and desktop and supports one-click copy.
Use cases
- Check WCAG contrast while picking UI colors to avoid accessibility rejections
- Generate harmonious palettes and complementary colors for campaigns
- Convert HEX to RGB/HSL and copy as CSS variables for handoff
- Experiment with gradients and shadows for illustrations and video
- Use it to cross-check “颜色对比度、wcag” in reports, docs or APIs to avoid manual conversion errors
How to use
- 1 Pick a color via picker or enter HEX/RGB/HSL values
- 2 Switch color spaces and watch live preview and contrast scores
- 3 Copy results as CSS, Tailwind or design-token formats
- 4 Export palettes as ASE/JSON for Figma or Photoshop
Highlights
- Local & private: processing stays in your browser
- Live validation with tolerant parsing
- One-click copy and export for docs, code or sheets
- Batch and offline support under poor network
Notes
- Alpha affects blended contrast; re-check on final background
- Displays vary—verify critical colors on target devices
- Export large palettes in batches to avoid memory spikes
FAQ
Is conversion lossy?
Why does contrast fail?
How is Color Contrast Checker different?
Can I use results in official reports?
All calculations run locally in your browser; nothing is uploaded.