Công cụ này giúp bạn kiểm tra độ tương phản màu giữa màu chữ và màu nền theo tiêu chuẩn WCAG 2.1. Chọn màu, xem tỷ lệ tương phản và kết quả đạt hoặc không đạt ngay lập tức. Nếu chưa đạt, công cụ sẽ gợi ý một màu chữ gần nhất và đạt chuẩn AA.
Đang tải công cụ...
Độ tương phản màu là gì và vì sao quan trọng?
Độ tương phản là sự khác biệt độ sáng giữa hai màu, đo bằng tỷ lệ từ 1:1 (giống hệt nhau) đến 21:1 (đen trên trắng). Chữ xám nhạt trên nền trắng nhìn đẹp trên màn hình thiết kế nhưng rất khó đọc ngoài trời nắng, với người lớn tuổi hoặc người kém thị lực. Website dễ đọc giữ chân khách lâu hơn và giảm tỷ lệ thoát trang.
Tiêu chuẩn WCAG yêu cầu tỷ lệ bao nhiêu?
- AA, văn bản thường: từ 4,5:1. Đây là mức mục tiêu cho hầu hết website.
- AA, chữ lớn: từ 3:1 (cỡ chữ từ 24px, hoặc 19px trở lên nếu in đậm).
- AAA, văn bản thường: từ 7:1, mức cao nhất.
- Thành phần giao diện và biểu tượng: từ 3:1, ví dụ viền ô nhập, biểu tượng nút.
Cách dùng công cụ
- Chọn màu chữ và màu nền bằng bảng màu, hoặc gõ mã dạng #RRGGBB.
- Xem khung xem trước và tỷ lệ tương phản được tính tự động.
- Nếu chưa đạt AA, bấm “Dùng màu này” để áp dụng màu gợi ý.
- Sao chép mã màu từ dải sắc độ để dùng cho thiết kế.
Câu hỏi thường gặp
Tỷ lệ tương phản bao nhiêu là đủ?
Với văn bản thường, nên đạt từ 4,5:1 (mức AA). Chữ lớn cần từ 3:1.
Trên màu nền tối có áp dụng được không?
Có. Công thức tính theo độ sáng tương đối nên dùng được cho cả giao diện sáng và tối. Bạn dùng nút đổi chỗ để thử nhanh.
Logo có cần đạt chuẩn tương phản không?
Theo WCAG, logo và chữ mang tính thương hiệu được miễn yêu cầu, nhưng nên đạt để người dùng nhận ra thương hiệu dễ hơn.
Muốn có một website chuẩn kỹ thuật ngay từ đầu? Xem dịch vụ thiết kế website trọn gói, SEO website tổng thể hoặc liên hệ trực tiếp với Nam để được tư vấn miễn phí.
