Tại sao WCAG yêu cầu tương phản 4.5:1?
Đây là tiêu chuẩn AA giúp người khiếm thị mức độ vừa đọc được văn bản mà không cần thiết bị hỗ trợ. Tiêu chuẩn AAA nghiêm ngặt hơn yêu cầu 7:1.
Chọn màu sắc
Chọn màu và chuyển đổi giữa HEX, RGB, HSL
Tỷ lệ tương phản
⬜ ⬛
Màu bổ sung & Màu tương tự
Chọn màu sắc
Nên dùng HEX hay RGB?
HEX ngắn gọn hơn và phổ biến trong CSS. Dùng rgba() khi cần độ trong suốt, ví dụ rgba(0,0,0,0.5) là màu đen trong suốt 50%.
Cách triển khai màu dark mode?
Dùng CSS custom properties với @media (prefers-color-scheme: dark). Định nghĩa biến màu cho chế độ sáng mặc định, ghi đè trong media query tối.
Mã màu: HEX, RGB và HSL
HEX, RGB và HSL là ba cách biểu diễn màu sắc trên máy tính. HEX (ví dụ #FF5733) phổ biến nhất trên web, RGB (ví dụ rgb(255,87,51)) dùng giá trị đỏ-xanh lá-xanh dương, HSL (ví dụ hsl(11,100%,60%)) dùng màu sắc-độ bão hòa-độ sáng. Cả ba định dạng đều mô tả cùng một màu, chỉ là cách biểu diễn khác nhau.
Tỷ lệ tương phản WCAG là gì?
WCAG (Hướng dẫn Tiếp cận Web) tiêu chuẩn AA yêu cầu tỷ lệ tương phản ít nhất 4.5:1 giữa văn bản và nền. Đây là mức tối thiểu để người dùng khiếm thị mức độ vừa có thể đọc mà không cần thiết bị hỗ trợ. Tiêu chuẩn AAA nghiêm ngặt hơn với 7:1.
HSL: Mô hình màu trực quan
HSL dùng Hue (màu sắc: 0-360°), Saturation (độ bão hòa: 0-100%) và Lightness (độ sáng: 0-100%) để mô tả màu trực quan hơn RGB. Muốn tạo phiên bản sáng của màu thương hiệu, chỉ cần tăng giá trị L mà không cần tính toán RGB phức tạp. HSL được dùng rộng rãi trong hệ thống thiết kế vì dễ điều chỉnh.
Ứng dụng màu bổ sung và tương tự
Màu bổ sung đối diện 180° trên vòng màu (như xanh dương và cam, đỏ và xanh lá) tạo độ tương phản mạnh và cảm giác năng động. Màu tương tự là màu kế cận (như xanh dương, tím xanh, tím) tạo bảng màu hài hòa, êm dịu. Hệ thống màu UI tốt thường gồm màu chính, màu nhấn (bổ sung), màu trung tính và màu ngữ nghĩa (thành công/cảnh báo/lỗi).
Quản lý màu với CSS Custom Properties
CSS Custom Properties (biến CSS) cho phép quản lý màu tập trung: khai báo --color-primary: #2563EB; rồi dùng background-color: var(--color-primary); xuyên suốt trang web. Khi cần đổi màu thương hiệu, chỉ sửa một chỗ. Kết hợp với @media (prefers-color-scheme: dark) để dễ dàng chuyển đổi dark mode.
Câu hỏi thường gặp
Nên dùng HEX hay RGB?
HEX ngắn gọn hơn và phổ biến trong CSS. Dùng rgba() khi cần độ trong suốt, ví dụ rgba(0,0,0,0.5) là màu đen trong suốt 50%.
Tại sao WCAG yêu cầu tương phản 4.5:1?
Đây là tiêu chuẩn AA giúp người khiếm thị mức độ vừa đọc được văn bản mà không cần thiết bị hỗ trợ. Tiêu chuẩn AAA nghiêm ngặt hơn yêu cầu 7:1.
Cách triển khai màu dark mode?
Dùng CSS custom properties với @media (prefers-color-scheme: dark). Định nghĩa biến màu cho chế độ sáng mặc định, ghi đè trong media query tối.