Bộ chuyển đổi màu & kiểm tra tương phản

Bộ chuyển đổi dịch một màu duy nhất giữa HEX (#rrggbb), RGB (rgb(r, g, b)), và HSL (hsl(h, s%, l%)) theo thời gian thực, nên bạn có thể dán bất kỳ định dạng nào hệ thống thiết kế dùng và nhận hai cái còn lại. Kiểm tra tương phản lấy nền trước và nền sau, tuyến tính hóa cả hai qua đường cong gamma sRGB, và báo cáo tỷ lệ tương phản WCAG 2.x cùng với phán quyết AA / AAA cho kích thước văn bản thường và lớn.

Ví dụ

Đầu vào — màu xanh thương hiệu điển hình:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Ghép với trắng (#ffffff) làm nền sau:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Tại sao WCAG AAA không đạt cho cặp màu này?

Đây là những cạm bẫy tương phản và chuyển đổi phổ biến nhất đáng chú ý:

• Nhầm AA large với AA normal. Văn bản lớn chỉ cần 3:1, nên một liên kết đọc tốt trong H1 vẫn có thể không đạt ở kích thước thân. Nếu một cặp đạt 3.5:1, nó vượt qua tiêu đề nhưng không qua đoạn văn.
• Dùng độ sáng HSL thay cho tương phản. hsl(0, 100%, 50%) (đỏ) và hsl(240, 100%, 50%) (xanh dương) đều có L=50% nhưng độ sáng rất khác nhau. Luôn tính tương phản từ giá trị RGB, không từ độ sáng HSL.
• Quên ghép alpha. Văn bản ở rgba(0, 0, 0, 0.6) trên trắng thực chất là #666666. Kiểm tra HEX đã làm phẳng, không phải giá trị bán trong suốt.
• Độ dài hex sai. #fff mở rộng thành #ffffff, nhưng #ffff là dạng ngắn 4 chữ số với byte alpha. Kiểm tra lại số chữ số khi trường HEX âm thầm từ chối đầu vào.
• Trộn display-P3 và sRGB. Màu lấy từ công cụ thiết kế như Figma ở chế độ gamut rộng có thể nằm ngoài phạm vi sRGB, và trình duyệt sẽ cắt chúng. Chuyển đổi sang sRGB trong công cụ nguồn trước khi sao chép HEX.
• Chỉ kiểm tra tương phản so với trắng thuần. Nếu bố cục thực đặt văn bản trên #f3f4f6 hoặc trên ảnh, tương phản nhìn thấy thấp hơn. Kiểm tra với nền sau thực tế.

Tôi cần tỷ lệ tương phản nào để vượt qua WCAG AA?

WCAG 2.1 AA yêu cầu 4.5:1 cho văn bản thân thường và 3:1 cho văn bản lớn, trong đó lớn nghĩa là tối thiểu 18 pt (24 px) thường hoặc 14 pt (18.66 px) đậm. Thành phần UI và đối tượng đồ họa cần 3:1 so với nền sau của chúng. AAA nâng mức lên 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn.

Tại sao HSL tôi gõ lại cho giá trị RGB hơi khác?

HSL được lưu trữ dưới dạng phần trăm nguyên trong hầu hết công cụ, nên vòng RGB sang HSL sang RGB có thể lệch một đơn vị trên mỗi kênh. Độ lệch đó nằm trong JND và không nhìn thấy trên màn hình, nhưng nếu bạn cần độ trung thực vòng chính xác, giữ giá trị HEX hoặc RGB làm nguồn chân lý và coi HSL như một góc nhìn.

Công cụ này có dùng hiệu chỉnh gamma sRGB cho tương phản không?

Có. Tính toán tương phản tuân theo công thức WCAG 2.x, tuyến tính hóa mỗi kênh sRGB bằng đường cong gamma, tính độ sáng tương đối, và lấy (L1 + 0.05) / (L2 + 0.05). Trung bình đơn giản của các kênh hoặc độ sáng HSL thô sẽ cho ra con số gây hiểu lầm và sẽ không khớp với kết quả WCAG.

Làm thế nào để xử lý màu alpha hoặc bán trong suốt?

Tương phản WCAG được định nghĩa so với nền đặc, vì vậy làm phẳng bất kỳ alpha nào bằng cách ghép nền trước lên nền thực trước. Ví dụ, khối văn bản đen 50% trên trang trắng thực chất là #808080 trên #ffffff. Truyền HEX đã làm phẳng đó vào bộ kiểm tra thay vì giá trị bán trong suốt.

HEX #rgb có giống #rrggbb không?

Có. Dạng ngắn 3 chữ số mở rộng mỗi nibble bằng cách lặp lại nó, nên #f0c trở thành #ff00cc. Dạng 4 chữ số và 8 chữ số thêm kênh alpha. Công cụ này chấp nhận HEX 3 chữ số, 6 chữ số, và 8 chữ số, và coi byte alpha chỉ là thông tin cho tương phản vì WCAG yêu cầu màu ghép đặc.

Bạn có lưu màu tôi gõ hoặc chọn không?

Không. Chúng tôi không giữ bất kỳ hồ sơ nào về các màu bạn kiểm tra, chuyển đổi, hoặc kiểm tra tương phản. Mọi thứ bạn gõ hoặc kéo vào bộ chọn bị loại bỏ khi bạn đóng tab — không ghi log, không phân tích giá trị màu của bạn. Ngó vào developer tools của trình duyệt nếu bạn muốn tự kiểm.