Xây dựng hệ thống màu sắc tự điều chỉnh với contrast-color(): Kỷ nguyên mới của CSS hiện đại

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

contrast-color() là hàm CSS mới cho phép trình duyệt tự động chọn màu chữ (đen hoặc trắng) dựa trên độ tương phản với màu nền.

Giải pháp này thay thế hoàn toàn các thư viện JavaScript runtime, giúp tối ưu hiệu suất và loại bỏ hiện tượng "hydration flash".

Hiện tại hàm đã hỗ trợ trên các trình duyệt chính (Chrome 147+, Firefox 146+, Safari 26.0+), đạt trạng thái Baseline Newly Available.

Trong suốt nhiều năm, cộng đồng phát triển web đã vật lộn với các vấn đề về độ tương phản màu sắc. Dù có hàng tá thư viện JavaScript và các công cụ kiểm tra (linting) chuyên dụng, tỷ lệ các trang web vi phạm tiêu chuẩn WCAG vẫn ở mức báo động. contrast-color() chính là câu trả lời mà chúng ta đã chờ đợi từ lâu: một giải pháp CSS thuần túy, mạnh mẽ và hiệu quả.

Tại sao contrast-color() là bước ngoặt?

Trước đây, để đạt được độ tương phản tối ưu, chúng ta thường phải dựa vào JavaScript để tính toán độ sáng (luminance) của màu nền và quyết định màu chữ phù hợp. Điều này dẫn đến sự phụ thuộc vào runtime, tăng kích thước bundle và gây ra hiện tượng giật lag khi trang web tải (hydration flash).

Với contrast-color(), trình duyệt sẽ thực hiện các phép toán phức tạp ngay trong quá trình tính toán style (style computation) trước khi trang web được vẽ (paint).

Bảng so sánh tỷ lệ lỗi tương phản (WebAIM Million)

Năm	Tỷ lệ lỗi tương phản (%)	Xu hướng
2025	79.1%	Cơ sở
2026	83.9%	Tăng

Cách thức hoạt động

Cú pháp của hàm rất đơn giản. Bạn cung cấp một màu nền, và hàm sẽ trả về màu đen hoặc trắng tùy thuộc vào màu nào có độ tương phản tốt hơn.

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

Sơ đồ quy trình xử lý màu sắc

[Màu nền đầu vào] ➔ [Trình duyệt tính toán Luminance] ➔ [Chọn màu đen/trắng] ➔ [Áp dụng màu chữ]

Những lưu ý kỹ thuật quan trọng

Không phải là con số: contrast-color() trả về một giá trị màu (<color>), không phải là một tỷ lệ tương phản (ratio).
Hỗ trợ hiện tại: Chỉ hỗ trợ đen hoặc trắng. Các tính năng nâng cao như danh sách màu tùy chọn (candidate lists) thuộc về CSS Color Level 6 và chưa được triển khai.
Tên gọi: Hãy cẩn thận với các bài viết cũ gọi nó là color-contrast(). Tên gọi đó đã bị loại bỏ khỏi đặc tả kỹ thuật.

Tối ưu hóa với Progressive Enhancement

Để đảm bảo trải nghiệm tốt nhất cho người dùng trên các trình duyệt cũ, hãy sử dụng @supports:

.card {
  background: var(--bg);
  color: #fff;
  text-shadow: 0 0 4px rgb(0 0 0 / 0.8);
}

@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg));
    text-shadow: none;
  }
}

Kết hợp với các kỹ thuật CSS hiện đại

Bạn có thể kết hợp contrast-color() với các hàm màu mới như oklch() hoặc color-mix() để tạo ra các hệ thống thiết kế linh hoạt. Nếu bạn quan tâm đến việc đưa dữ liệu từ JavaScript vào CSS một cách tối ưu, hãy tham khảo bài viết Prop For That: Cách đưa dữ liệu thời gian thực từ JavaScript vào CSS một cách đột phá.

Ngoài ra, để đảm bảo khả năng tiếp cận (Accessibility) toàn diện hơn, bạn cũng nên tìm hiểu về Sức hút khó cưỡng của ariaNotify(): Bước tiến mới trong khả năng tiếp cận trên Web.

Kết luận

contrast-color() không chỉ là một hàm CSS; nó là sự chuyển dịch tư duy từ việc "cố gắng sửa lỗi bằng JS" sang "xây dựng hệ thống bền vững bằng CSS". Việc áp dụng công nghệ này sẽ giúp các nhà phát triển giảm bớt gánh nặng về hiệu suất, đồng thời nâng cao trải nghiệm người dùng một cách tự nhiên và chính xác nhất.