HEX, RGB, HSL, CMYK và cách kiểm tra độ tương phản của chữ

Mã màu là một màu được viết theo cách ký hiệu khác. HEX, RGB và HSL mô tả cùng một ánh sáng trên màn hình, nên chúng chuyển đổi qua lại chính xác, chỉ sai lệch do làm tròn. CMYK mô tả mực in trên giấy, nên việc chuyển từ giá trị màn hình sang CMYK chỉ là ước tính. Tỷ lệ tương phản WCAG là một con số riêng, so sánh độ sáng của hai màu, và nó quyết định chữ có dễ đọc hay không. Dán một màu vào công cụ chuyển đổi màu để xem mọi định dạng cùng lúc.

Công cụ chuyển đổi màuCần đổi màu sang định dạng khácDùng miễn phí

Nếu màu bạn cần nằm trong một bức ảnh, logo hay ảnh chụp màn hình, hãy lấy màu từ điểm ảnh bằng công cụ lấy màu từ ảnh trước, rồi dán mã HEX vào đây. Cách lấy đúng màu từ ảnh giải thích các bước thực hiện.

HEX và RGB là cùng một bộ số

Mã HEX gồm ba cặp chữ số thập lục phân. #34D6A0 chứa giá trị đỏ, xanh lục và xanh lam. Mỗi cặp là một số từ 00 đến FF, tức 0 đến 255 trong hệ thập phân. Vậy 34 là 52, D6 là 214 và A0 là 160, và dạng RGB là rgb(52, 214, 160).

Việc viết số ở hệ thập lục phân chỉ thay đổi cách hiển thị. Dạng rút gọn #abc có nghĩa là #aabbcc, mỗi chữ số được nhân đôi. Mã tám chữ số thêm một cặp độ trong suốt ở cuối, từ 00 là hoàn toàn trong suốt đến FF là hoàn toàn đặc, nên #34D6A080 gần như trong suốt một nửa. RGBA ghi cùng độ trong suốt đó dưới dạng số từ 0 đến 1.

CSS cũng chấp nhận tên màu. rebeccapurple tương đương #663399. Công cụ đọc tên màu thông qua chính trình duyệt, nên mọi tên mà trình duyệt nhận biết đều hoạt động.

HSL mô tả màu theo cách con người vẫn nói

HSL là viết tắt của sắc độ (hue), độ bão hòa (saturation) và độ sáng (lightness). Sắc độ là một góc trên vòng tròn màu: đỏ ở 0 độ, xanh lục ở 120 và xanh lam ở 240. Độ bão hòa cho biết màu xa xám đến mức nào, còn độ sáng cho biết màu xa đen hoặc trắng đến mức nào.

Cùng màu #34D6A0 là hsl(160, 66%, 52%). Sắc độ của nó nằm giữa xanh lục và xanh lam, độ bão hòa cao, còn độ sáng chỉ hơi trên mức giữa. HSL là dạng dễ chỉnh tay nhất, vì bạn có thể giữ nguyên sắc độ và chỉ thay đổi độ sáng để có một sắc nhạt hơn hoặc đậm hơn.

HSV gần giống HSL nhưng dùng độ sáng giá trị (value), tức độ sáng của kênh mạnh nhất, thay cho độ sáng. Một số công cụ chọn màu dùng HSV, nên bạn có thể gặp nó ở các công cụ khác. Công cụ này hiển thị HSV cạnh HSL để bạn so sánh hai dạng.

CMYK dành cho mực in, nên chỉ là ước tính

Màn hình cộng thêm ánh sáng: đỏ, xanh lục và xanh lam cộng lại thành trắng. Máy in thì lấy bớt ánh sáng bằng mực: lục lam, đỏ tươi, vàng và đen trên giấy trắng. Hai hệ thống này không thể khớp hoàn toàn, nên giá trị CMYK luôn là một bản chuyển đổi gần đúng.

Công cụ dùng công thức đơn giản. Đen là K, bằng một trừ đi giá trị lớn nhất trong ba kênh đỏ, xanh lục và xanh lam trên thang từ 0 đến 1. Lục lam, đỏ tươi và vàng sau đó được tính từ phần còn lại sau K. Công thức bỏ qua mực, giấy và hồ sơ màu mà máy in sử dụng. Kết quả in ra vì vậy sẽ khác, và những màu rất sáng có thể nằm ngoài khả năng in của mực CMYK. Hãy dùng giá trị CMYK để bắt đầu trao đổi với nhà in, và yêu cầu bản in thử trước khi in số lượng lớn.

Tương phản phụ thuộc vào độ sáng, không phụ thuộc vào sắc độ

Tỷ lệ tương phản WCAG so sánh hai màu dựa trên độ sáng tương đối của chúng. Độ sáng được tính từ giá trị đỏ, xanh lục và xanh lam sau khi hiệu chỉnh gamma, và màu xanh lục được tính nhiều nhất vì mắt người nhạy nhất với nó. Trước tiên, mỗi kênh được chuyển từ thang 0 đến 255, rồi độ sáng bằng 0,2126 nhân với đỏ, cộng 0,7152 nhân với xanh lục, cộng 0,0722 nhân với xanh lam.

Tỷ lệ bằng độ sáng lớn hơn cộng 0,05, chia cho độ sáng nhỏ hơn cộng 0,05. Chữ đen trên nền trắng cho tỷ lệ 21 trên 1, là mức cao nhất có thể. Hai màu có thể trông khác nhau khá rõ về sắc độ nhưng vẫn có tỷ lệ thấp nếu chúng có cùng độ sáng, và đây chính là trường hợp mà phép kiểm tra này được tạo ra để phát hiện. Độ tương phản thấp cũng là lý do mã QR không quét được.

Các ngưỡng

WCAG 2.x đặt hai mức, và tỷ lệ yêu cầu phụ thuộc vào kích cỡ chữ.

• Mức AA: 4,5 trên 1 cho chữ thường, và 3 trên 1 cho chữ lớn.
• Mức AAA: 7 trên 1 cho chữ thường, và 4,5 trên 1 cho chữ lớn.

Chữ lớn là chữ từ 24 pixel trở lên, hoặc 18,66 pixel và in đậm. Mọi cỡ nhỏ hơn được coi là chữ thường. Chữ xám trên nền trắng là lỗi thường gặp. Màu xám trung bình như #777777 trên nền trắng cho khoảng 4,48 trên 1. Nó trượt mức AA cho chữ thường với khoảng cách nhỏ, nhưng đạt mức AA cho tiêu đề lớn.

Công cụ hiển thị tỷ lệ làm tròn đến hai chữ số thập phân, nhưng mỗi kết quả đạt hay không đạt đều dựa trên con số chính xác. Vì vậy, một giá trị hiển thị là 4,50 vẫn có thể không đạt nếu nó thấp hơn một chút. Phép kiểm tra chỉ đo một điều duy nhất. Nó không xét độ đậm của phông chữ, khoảng cách dòng hay cách người bị mù màu nhìn thiết kế, nên hãy kiểm tra trang thật ở đúng kích cỡ thật.

Sắc nhạt và sắc đậm

Dải màu bên dưới công cụ hiển thị chín bước quanh màu gốc: bốn sắc nhạt pha với trắng, chính màu đó, và bốn sắc đậm pha với đen. Nhấn vào một ô để sao chép mã HEX của nó. Điều này hữu ích khi bạn cần một bộ màu liên quan, chẳng hạn một nền sáng, trạng thái khi di chuột và một màu chữ tối, đều lấy từ một màu thương hiệu. Hãy kiểm tra từng cặp bạn chọn bằng phần độ tương phản trước khi dùng.

Cách thực hiện với fixmint

1. Dán một màu vào ô Màu dưới dạng HEX, RGB, HSL hoặc tên CSS như rebeccapurple.
2. Đọc các dòng HEX, RGB, HSL, HSV và CMYK. Nhấn Sao chép bên cạnh dòng bạn cần. CMYK được ghi nhãn là ước tính.
3. Nhập màu nền vào Nền, hoặc nhấn vào ô màu của nó, rồi đọc tỷ lệ ở Trên nền trắng, Trên nền đen và Trên nền của bạn.
4. Kiểm tra bốn dấu bên dưới mỗi tỷ lệ: AA và AAA, mỗi loại cho chữ thường và chữ lớn.
5. Trong Bảng màu và sắc thái, nhấn vào một ô màu để sao chép.

Câu trả lời nhanh

Giá trị CMYK có chính xác không?

Không. Đó là phép tính số học đơn giản, bỏ qua máy in, giấy và hồ sơ màu. Hãy coi nó là điểm khởi đầu và yêu cầu bản in thử.

Tỷ lệ tương phản đạt yêu cầu thì thiết kế có dễ tiếp cận không?

Nó cho biết màu chữ đáp ứng một ngưỡng đo được. Khả năng tiếp cận còn phụ thuộc vào kích cỡ, khoảng cách, chuyển động và cách trang được xây dựng, nên tỷ lệ chỉ là một chỉ dẫn, không phải là đánh giá đầy đủ.

Nên lưu định dạng nào trong bảng định kiểu?

Định dạng nào bạn đọc và chỉnh sửa dễ nhất. HEX gọn và phổ biến. HSL dễ điều chỉnh bằng tay hơn, vì bạn thay đổi độ sáng mà không làm thay đổi sắc độ.