Độ tương phản màu WCAG cho nhà thiết kế
Quy tắc 4.5:1, công thức tính tỷ lệ tương phản và các công cụ miễn phí để kiểm tra bất kỳ cặp màu nào.
Nếu văn bản của bạn không đạt độ tương phản WCAG AA, ước tính có 285 triệu người khiếm thị không thể đọc được. Thêm vào đó, bạn đang đứng trên bờ vực pháp lý ngày càng mong manh ở EU và Mỹ. Tin tốt: quy tắc rất đơn giản.
Quy tắc 4.5:1
Văn bản nội dung phải có tỷ lệ tương phản ít nhất 4.5:1 so với nền của nó để đạt WCAG AA. Văn bản lớn (24px+ thường hoặc 18px+ đậm) có ngưỡng thấp hơn là 3:1.
Để đạt chuẩn AAA: 7:1 cho văn bản nội dung, 4.5:1 cho văn bản lớn.
Cách tính tỷ lệ tương phản
WCAG sử dụng độ chói tương đối — chuyển đổi mỗi màu thành giá trị độ chói (0 = đen, 1 = trắng) bằng một công thức cụ thể, sau đó tính (L1 + 0.05) / (L2 + 0.05), trong đó L1 là màu sáng hơn.
Bạn không cần phải tự tính toán — hãy sử dụng công cụ kiểm tra tương phản miễn phí của chúng tôi để nhập bất kỳ hai màu nào và xem tỷ lệ.
Các trường hợp thường thất bại
- Xám nhạt trên nền trắng — #999 trên #fff = 2.85 (thất bại). #767676 trên #fff = 4.54 (đạt).
- Trắng trên nền vàng — hầu như luôn thất bại. Sử dụng văn bản tối màu trên nền vàng.
- Liên kết màu trong văn bản nội dung — hầu hết liên kết xanh đạt trên nền trắng nhưng thất bại trên nền xám nhạt. Hãy kiểm tra nền thực tế xung quanh.
- Màu thương hiệu trông rất đẹp — chúng thường thất bại. Thêm nền trắng ngà hoặc làm tối văn bản.
Chọn cặp màu dễ tiếp cận
Ba mẫu đáng tin cậy:
- Tối trên sáng — #1f2937 trên #fff = 14:1 (hoàn hảo).
- Trắng trên tối — #fff trên #1f2937 = 14:1 (hoàn hảo).
- Tối trên điểm nhấn — #1f2937 trên #fbbf24 = 9:1 (hoàn hảo cho nút).
Ngoài văn bản
WCAG 2.1 cũng yêu cầu 3:1 cho các phần tử không phải văn bản (nút, vòng tiêu điểm, viền biểu mẫu). Công cụ kiểm tra xử lý cả hai.
Hình nền không làm rối widget của bạn
Nếu bạn là nhà thiết kế đặt hình nền phía sau widget đồng hồ và thông báo, hãy chọn hình nền có độ tương phản dưới 5:1 ở khu vực widget. Công cụ Gaussian blur của chúng tôi có thể làm mềm các khu vực rối của bất kỳ hình nền nào để cải thiện khả năng đọc của widget.
Thử các công cụ miễn phí của chúng tôi
Hầu hết các hướng dẫn này đi kèm với một công cụ thực hành bạn có thể sử dụng ngay — không cần đăng ký cho lần chạy đầu tiên:
- Trình thay đổi kích thước ảnh — thu nhỏ + phóng to chính xác đến từng pixel.
- Chuyển đổi sang WebP — tệp nhỏ hơn 30-50% so với JPG.
- Xóa nền — cắt một cú nhấp chuột, PNG trong suốt.
- Trình tạo Favicon — mọi kích thước trình duyệt từ một nguồn.
- Trình thay đổi kích thước mạng xã hội — kích thước chính xác cho mọi nền tảng.
- Xử lý hàng loạt — áp dụng bất kỳ công cụ nào cho tối đa 200 ảnh cùng lúc.
Duyệt qua danh mục công cụ đầy đủ.
