Vận hành
Trình kiểm tra độ tương phản màu
Quảng cáo
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Nhập các tổ hợp màu của bạn bên dưới để kiểm tra chúng bằng trình kiểm tra độ tương phản màu của chúng tôi và xem ngay liệu chúng có đáp ứng các tiêu chuẩn trợ năng hay không.
Cách thức hoạt động của Trình kiểm tra độ tương phản màu của chúng tôi
Nhập màu nền trước và nền của bạn bằng cách sử dụng các giá trị hex RGB hoặc chọn chúng trực tiếp bằng Bộ chọn màu.
- Điều chỉnh Alpha để thay đổi độ trong suốt của màu nền trước.
- Sử dụng thanh trượt Độ sáng để làm cho màu trông nhạt hơn hoặc đậm hơn.
Sau đó, công cụ của chúng tôi sẽ tính toán tỷ lệ tương phản và kiểm tra tỷ lệ đó theo nguyên tắc của WCAG:
- WCAG 2.0 cấp AA
- Ít nhất 4,5:1 đối với văn bản nội dung thông thường
- Ít nhất 3:1 đối với văn bản lớn
- WCAG 2.1 (Giao diện người dùng và đồ họa)
- Ít nhất 3:1 đối với biểu tượng, đường viền và các thành phần giao diện khác
- WCAG cấp AAA
- Ít nhất 7:1 đối với văn bản thông thường
- Ít nhất 4,5:1 đối với văn bản lớn
Văn bản lớn có nghĩa là:
- 14 pt (khoảng 18,66 px) và in đậm hoặc
- 18 pt (khoảng px) hoặc lớn hơn
Bạn có thể sử dụng ống nhỏ mắt trong Bộ chọn màu để lấy màu chính xác từ mọi thứ trên màn hình của bạn.
Để làm nổi bật các liên kết chỉ dựa vào màu sắc, hãy sử dụng trình kiểm tra độ tương phản màu của chúng tôi để đảm bảo chúng đáp ứng các tiêu chuẩn về khả năng truy cập và luôn dễ đọc cho mọi người.