Màu

Màu dễ tiếp cận

Đừng chỉ sử dụng màu sắc để cho biết sự hiện diện của một thành phần giao diện người dùng hoặc trạng thái của thành phần đó: Hãy sử dụng biểu tượng và/hoặc hình dạng để giúp phân biệt. Không CHỈ dùng màu sắc để biểu thị trạng thái thành công/lỗi. Sử dụng biểu tượng hoặc văn bản.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Độ tương phản

• Tiêu chuẩn về độ tương phản tối thiểu: Duy trì tỷ lệ 4,5:1 cho văn bản thông thường và 3:1 cho văn bản hoặc biểu tượng lớn.
• Đảm bảo tiêu chuẩn về độ tương phản không phải văn bản: Duy trì tỷ lệ tương phản tối thiểu là 3:1 cho ranh giới và trạng thái của thành phần giao diện người dùng.
  • Điều này bao gồm các thành phần hình ảnh (đường viền, nền, bóng hộp, gạch dưới) tạo thành ranh giới hoặc cho biết sự hiện diện của một thành phần giao diện người dùng (ví dụ: đường viền trường nhập dữ liệu).
  • Điều này cũng bao gồm các thành phần hình ảnh cho biết trạng thái hoạt động trong một thành phần (ví dụ: dấu kiểm của hộp đánh dấu hoặc nút chuyển).
  • Lưu ý: Việc đáp ứng tỷ lệ tương phản 3:1 cho nội dung không phải văn bản có thể gây khó khăn cho các thiết kế tối giản. Hiệu ứng chuyển màu nhẹ nhàng hoặc bóng đổ tinh tế vào trong/ra ngoài có thể làm mềm các ranh giới hình ảnh trong khi vẫn đáp ứng các yêu cầu về hỗ trợ tiếp cận.
• Chỉ sử dụng prefers-contrast khi cần thiết: Hãy dùng @media (prefers-contrast: more) khi thiết kế sử dụng các điểm nhấn có độ tương phản thấp (ví dụ: đường viền tinh tế, văn bản phụ có màu trầm) cần được làm nổi bật; hầu hết các trang web đã đáp ứng độ tương phản cơ bản sẽ không cần đến chế độ này.

Bảng phối màu sáng và tối

• Hỗ trợ bảng phối màu sáng và tối: Tuân thủ @media (prefers-color-scheme: dark) và kết hợp với thuộc tính CSS color-scheme để các thành phần điều khiển biểu mẫu, thanh cuộn và các nền tảng khác do UA kết xuất đều khớp với nhau. Hãy xem phần Chế độ tối để biết thêm chi tiết.

Chế độ màu bắt buộc

• Hỗ trợ Chế độ buộc màu: Ở Chế độ buộc màu (Độ tương phản cao trên Windows), trình duyệt sẽ ghi đè màu của tác giả bằng các từ khoá hệ thống và dải background-image, box-shadow và border-image. Xác định màu dự phòng của hệ thống cho mã thông báo màu bằng @media (forced-colors: active).
• Chỉ sử dụng forced-color-adjust: none khi màu sắc là thông tin thiết yếu (bộ đánh dấu cú pháp, mẫu công cụ chọn màu). KHÔNG sử dụng forced-color-adjust: none chỉ để duy trì tính thẩm mỹ.
• Đừng dựa vào background-image, box-shadow hoặc border-image để truyền tải đường viền, dấu phân cách hoặc trạng thái: Các thuộc tính này sẽ biến mất trong chế độ buộc màu (và thường là cả khi in). Nếu bắt buộc phải dùng, hãy đảm bảo có một phương án thay thế ở chế độ màu bắt buộc, chẳng hạn như outline hoặc border có từ khoá màu hệ thống (CanvasText, LinkText, ButtonText, Highlight, GrayText, v.v.).

Đang tạo sắc thái màu

Trước khi tạo sắc thái màu một cách linh động, hãy kiểm tra xem bạn có thể sử dụng mã thông báo thiết kế hiện có, được xác định trước hay không. Điều này giúp nhà thiết kế có nhiều quyền kiểm soát hơn và đảm bảo tính nhất quán.

Nếu bạn cần tạo màu sáng hơn hoặc tối hơn một cách linh động:

• KHÔNG chỉ điều chỉnh kênh độ sáng trong oklch/oklab hoặc lch/lab, ví dụ: oklab(from var(--primary) 0.9 a b). Mặc dù về mặt lý thuyết, đây là cách chính xác, nhưng các trình duyệt chưa triển khai tính năng ánh xạ gam màu, nên màu sắc thu được sẽ không thể đoán trước.
• Bạn có thể dùng color-mix() để pha trộn với màu trắng hoặc đen (tốt nhất là trong oklab). Cách này giúp giữ màu trong dải màu một cách an toàn, nhưng có xu hướng làm giảm độ bão hoà màu quá mức và tạo ra các sắc thái màu bị phai.
• Bạn CÓ THỂ kết hợp việc điều chỉnh độ sáng với bất kỳ phương pháp nào khác (ví dụ: color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) để cân bằng giữa hai phương pháp, nhưng tránh điều chỉnh độ sáng quá 30%.