Tỷ lệ tương phản chuẩn (Contrast Ratio) là bao nhiêu?

Theo chuẩn WCAG 2.1 AA của W3C, tỷ lệ tối thiểu phải là 4.5:1 đối với chữ thường (Normal Text) và 3.0:1 đối với chữ lớn (Large Text).

Chữ Lớn (Large Text) là gì?

Chữ lớn được W3C định nghĩa là cỡ chữ từ 18pt (tương đương 24px) trở lên, hoặc 14pt (khoảng 18.5px) trở lên nhưng phải in đậm (Bold).

Chuẩn AAA và AA khác nhau thế nào?

Chuẩn AA là mức tối thiểu để web dễ nhìn cho người bình thường (tỷ lệ 4.5:1). Chuẩn AAA là mức cao nhất, cực kỳ sắc nét dành cho cả người bị nhược thị (tỷ lệ 7.0:1).

🎨 Check Tương Phản Màu Nền (WCAG Color)

Đảm bảo màu chữ và màu nền của bạn dễ đọc nhất đối với mọi người dùng. Tiêu chuẩn quốc tế W3C AA & AAA.

✒️ Màu Nội Dung (Text)

🟦 Màu Nền (Background)

Tỷ lệ tương phản (Contrast Ratio)

4.54

Tuyệt vời! Chữ hiển thị rất rõ ràng.

Accessibility in Web Design is Important!

Đoạn văn bản kích thước tiêu chuẩn (Normal Text). Việc lựa chọn màu sắc tưởng chừng đơn giản nhưng lại ảnh hưởng trực tiếp đến trải nghiệm người dùng, đặc biệt là người dùng đọc web trên điện thoại ở ngoài trời sáng. Nhờ đó, việc đảm bảo Contrast Ratio luôn là ưu tiên hàng đầu của mọi UI/UX Designer.

Chữ phụ (Small text) hoặc Chú thích ảnh (Caption). Thường có độ mờ opacity thấp hơn.

🔤 Chữ Cỡ Thường (Normal) Dưới 18pt

Chuẩn AA (Tối thiểu 4.5:1) PASS

Chuẩn AAA (Tối thiểu 7.0:1) FAIL

🅰️ Chữ Lớn / In Đậm (Large) Trên 18pt / 14pt Đậm

Chuẩn AA (Tối thiểu 3.0:1) PASS

Chuẩn AAA (Tối thiểu 4.5:1) PASS

UI Component & Đồ Họa (Viền nút, biểu đồ...)

Chuẩn AA (Tối thiểu 3.0:1) PASS

❓ Câu hỏi thường gặp

Thuật toán (L1 + 0.05) / (L2 + 0.05) theo W3C. Trong đó L là chỉ số độ chói biểu kiến (relative luminance) của màu sắc, dao động từ 0 (Đen sẫm) đến 1 (Trắng sáng).

Không bắt buộc mức AAA, vì nó giới hạn nghiêm ngặt bảng màu của thiết kế. Hầu hết các trang web thương mại điện tử, mạng xã hội trên thế giới chỉ cần vượt qua mốc AA (4.5:1) là đã đủ thân thiện và đẹp mắt.

Cực kỳ có hại! Màu xám #999 trên nền trắng chỉ có tỷ lệ khoảng 2.8:1, gây mù mờ. Designer thường chuộng phong cách này cho đẹp nhưng lại rất khó đọc. Minimalist không phải là làm cho chữ mờ đi.