Cách trình duyệt tự động chọn màu tương phản trong CSS

(webkit.org)

2 điểm bởi GN⁺ 2025-05-19 | Chưa có bình luận nào. | Chia sẻ qua WhatsApp

CSS contrast-color() giúp giảm gánh nặng quản lý riêng từng cặp màu bằng cách để trình duyệt chọn màu chữ đen hoặc trắng phù hợp với những màu thường thay đổi, như nền nút
Khi truyền màu tham chiếu như color: contrast-color(var(--button-color));, lựa chọn tạo ra độ tương phản lớn hơn sẽ được tính lại theo thay đổi của màu nền
Hiện Safari Technology Preview dùng thuật toán tương phản WCAG 2 nên chọn chữ đen trên nền #317CFF, nhưng theo cảm nhận của con người, màu trắng có thể trông tự nhiên hơn
Tính năng này không tự động bảo đảm khả năng tiếp cận; vẫn cần kiểm chứng thiết kế như bảng màu, cỡ chữ, độ đậm phông chữ và prefers-contrast
CSS Working Group đang cung cấp tính năng ở phạm vi hẹp là chọn đen/trắng cho đến khi thảo luận về thuật toán tương phản WCAG 3 kết thúc; các công cụ chọn màu phức tạp hơn có thể được mở rộng sau

Gánh nặng quản lý màu mà `contrast-color()` giúp giảm bớt

Khi tạo nút với nhiều màu nền trong website hoặc ứng dụng web, nếu nền tối thì cần chữ trắng, còn nếu nền sáng thì cần chữ đen
Trước đây, phải định nghĩa cả --button-color và --button-text-color để quản lý cặp màu; trong các dự án lớn hoặc môi trường có nhiều đội tham gia, rất khó duy trì chính xác các tổ hợp này
contrast-color() cho phép truyền một màu tham chiếu trong CSS để trình duyệt chọn màu có độ tương phản lớn hơn giữa đen và trắng

color: contrast-color(purple);

Với nút, có thể áp dụng đồng thời biến màu nền và contrast-color()

button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}

Theo cách này, chỉ cần định nghĩa một màu nền, màu chữ sẽ do trình duyệt tự xác định theo đó

Suy ra cả màu theo trạng thái từ một biến

Khi dùng cùng Relative Color Syntax, có thể tạo màu hover từ màu nút cơ bản và tính màu chữ của từng trạng thái bằng contrast-color()

:root {
  --button-color: purple;
  --hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
  background-color: var(--hover-color);
  color: contrast-color(var(--hover-color));
}

Có thể xem kết quả trong ví dụ CodePen, và thử thay đổi động màu nút trên Safari 26.0 trở lên hoặc các trình duyệt được hỗ trợ

Kết quả thiếu tự nhiên do tính toán dựa trên WCAG 2

contrast-color() không tự động giải quyết toàn bộ vấn đề tương phản cho khả năng tiếp cận
Một số màu nền có thể không tạo đủ tương phản với cả đen lẫn trắng, nên vẫn cần nhà thiết kế, lập trình viên và tester kiểm tra
Tính đến tháng 5/2025, bản triển khai trong Safari Technology Preview dùng thuật toán WCAG 2
- Với nền xanh dương #317CFF, WCAG 2 tính độ tương phản của chữ đen là 5.45:1
- Với cùng nền đó, độ tương phản của chữ trắng được tính là 3.84:1
- contrast-color() chọn màu đen vì con số này lớn hơn
Theo cảm nhận của con người, trong tổ hợp này màu trắng có thể trông tốt hơn; thuật toán tương phản màu của WCAG 2 từ lâu đã bị phê bình

Thảo luận về thuật toán tương phản tiếp diễn trong APCA và WCAG 3

Accessible Perceptual Contrast Algorithm(APCA) là một trong các ứng viên có thể được đưa vào WCAG 3
APCA Contrast Calculator đánh giá chữ đen trên nền #317CFF là Lc 38.7, còn chữ trắng là Lc -70.9
- Trong điểm APCA, số âm nghĩa là chữ sáng hơn nền
- Độ lớn tương phản được so sánh bằng 38.7 và 70.9 sau khi bỏ dấu
- Với kết quả này, chữ trắng có độ tương phản cao hơn
APCA coi trọng tương phản dựa trên cảm nhận hơn tỷ lệ toán học đơn giản, phản ánh việc con người không cảm nhận độ tương phản theo màu sắc và độ sáng một cách tuyến tính
Tiêu chuẩn CSS hiện vẫn yêu cầu dùng thuật toán hiện có, nhưng có ghi chú rằng các thuật toán tương phản khác có thể được bổ sung trong tương lai
Vẫn đang tiếp tục thảo luận về việc WCAG 3 sẽ dùng thuật toán nào và xử lý giấy phép của các thuật toán ứng viên ra sao

Các điều kiện cần kiểm tra cùng trong thiết kế thực tế

Việc contrast-color() chọn màu tốt hơn khác với việc bảo đảm đủ tương phản
Đặc biệt với các màu tông trung, khác biệt kết quả giữa các thuật toán có thể trở nên lớn
Có thể dùng kèm media query prefers-contrast cho người dùng muốn độ tương phản cao hơn

@media (prefers-contrast: more) {
  /* styling with more contrast */
}

Ví dụ dùng #2DAD4E làm màu nền nút thương hiệu cho website vườn ươm cây giống
- Theo APCA, độ tương phản với chữ trắng là Lc -60.4
- Giá trị này có đủ hay không phụ thuộc vào cỡ chữ và độ đậm phông chữ
- APCA dùng một điểm số đơn từ Lc -108 đến 106 thay vì tỷ lệ của WCAG 2
APCA Readability Criterion đưa ra các mục tiêu mức Bronze, Silver, Gold để hỗ trợ chọn cỡ chữ và độ đậm
Trong phép tính ví dụ, tổ hợp chữ trắng với #2DAD4E dùng được với chữ 24px nếu font-weight từ 400 trở lên; nếu dùng font-weight 300 thì cần tối thiểu 41px
Với người dùng yêu cầu độ tương phản cao hơn, có thể chỉ định màu riêng cho chế độ sáng và chế độ tối
- Chế độ sáng: xanh lá đậm hơn và chữ trắng, Lc -76.1
- Chế độ tối: xanh lá sáng hơn và chữ đen, Lc 75.2

--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
  @media (prefers-color-scheme: light) {
    --button-color: #419543; /* darker green background */
  }
  @media (prefers-color-scheme: dark) {
    --button-color: #77CA8B; /* lighter green background */
  }
}
button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
  font-weight: 500;
}

Trong môi trường hiện tại, thuật toán WCAG 2 đang vận hành contrast-color(), nên có thể khó dùng cho website ví dụ này
Với các dự án có màu thương hiệu là xanh lá đậm hơn và lựa chọn đen/trắng cho ra kết quả đúng, tính năng này vẫn có thể hữu ích ngay bây giờ
contrast-color() đặc biệt hữu ích khi định nghĩa màu cho nhiều trạng thái hoặc tùy chọn như enabled/disabled, light/dark mode và prefers-contrast

Vì sao trước hết bị giới hạn ở lựa chọn đen/trắng

contrast-color() hiện được đơn giản hóa đáng kể so với color-contrast() từng có trong Safari Technology Preview 122
Khi thảo luận về thuật toán tương phản WCAG 3 chưa kết thúc, CSS Working Group trước mắt tiếp tục với công cụ chỉ chọn đen hoặc trắng tương phản với màu tham chiếu
Việc cố định lựa chọn ở đen/trắng giúp giảm khả năng website bị vỡ ngay cả khi thuật toán WCAG 2 thay đổi sau này
Trong tương lai, có thể xuất hiện công cụ mạnh hơn cho phép trình duyệt chọn từ danh sách màu tùy chỉnh hoặc chỉ định mức tương phản mong muốn
contrast-color() có thể dùng không chỉ cho màu chữ mà còn cho nhiều thuộc tính chỉ định màu như nền và viền

Cách trình duyệt tự động chọn màu tương phản trong CSS

Gánh nặng quản lý màu mà contrast-color() giúp giảm bớt

Suy ra cả màu theo trạng thái từ một biến

Kết quả thiếu tự nhiên do tính toán dựa trên WCAG 2

Thảo luận về thuật toán tương phản tiếp diễn trong APCA và WCAG 3

Các điều kiện cần kiểm tra cùng trong thiết kế thực tế

Vì sao trước hết bị giới hạn ở lựa chọn đen/trắng

Bài viết liên quan

Chưa có bình luận nào.

Gánh nặng quản lý màu mà `contrast-color()` giúp giảm bớt