Trình tạo bảng màu dễ tiếp cận

Trình tạo bảng màu có thể truy cập là gì?

Một trình tạo bảng màu có thể truy cập là một công cụ giúp bạn lắp ráp một tập hợp màu sắc cho một trang web, ứng dụng, hoặc thiết kế in trong đó mỗi cặp màu được dùng để hiển thị cùng nhau (văn bản trên nền, nút trên canvas, nhãn trên trường) đáp ứng các yêu cầu tương phản WCAG. Mục đích là bắt các kết hợp tương phản thấp tại thời điểm thiết kế thay vì tại thời điểm kiểm toán. Bạn thêm màu sắc vào một bảng, công cụ tính tỷ lệ tương phản giữa mọi cặp, và gắn nhãn mỗi cặp AAA đạt, AA đạt, hoặc không đạt. Bạn lặp lại cho đến khi mọi cặp bạn thực sự dự định sử dụng đạt.

Tỷ lệ tương phản là một số giữa 1:1 (các màu giống nhau, vô hình) và 21:1 (đen trên trắng). Tiêu chí thành công WCAG 2.2 1.4.3 yêu cầu 4.5:1 cho văn bản thân ở kích thước tiêu chuẩn (Cấp AA), 3:1 cho văn bản lớn (24px+ thường hoặc 18.66px+ đậm), và 4.5:1 cho các yếu tố đồ họa và điều khiển UI (SC 1.4.11). WCAG AAA nâng văn bản thân lên 7:1 và văn bản lớn lên 4.5:1. Hầu hết các trang web đối mặt công chúng phải đáp ứng ít nhất AA theo ADA, EAA, AODA và các luật tương tự; các trang web chính phủ ở nhiều khu vực pháp lý phải đáp ứng AAA.

Công cụ này chạy trong trình duyệt của bạn. Bạn chọn màu bằng trình chọn màu, công cụ tính độ sáng tương đối và tỷ lệ tương phản bằng công thức được chỉ định bởi WCAG, và một lưới hiển thị trạng thái của mỗi cặp. Bạn có thể xuất bảng cuối cùng dưới dạng thuộc tính tùy chỉnh CSS (var(--brand-primary)), danh sách HEX, đoạn cấu hình Tailwind, hoặc JSON cho design token. Không có gì được tải lên; toàn bộ bảng ở lại trên thiết bị của bạn.

Bên trong công cụ có gì

Phần trên cùng của công cụ là một bộ chọn màu cộng với một nút thêm vào bảng. Chọn một màu, đặt tên cho nó (Brand Primary, Surface, Body Text, v.v.), và thêm vào. Bảng phát triển như một danh sách mẫu màu xuống bên trái. Bạn có thể chỉnh sửa bất kỳ mẫu màu nào, xóa nó, hoặc kéo để sắp xếp lại. Các bảng có thể truy cập được xác định trước có sẵn dưới dạng điểm khởi đầu (các cặp tương phản cao, các bảng được thiết kế theo phong cách IBM Carbon, các bảng tông Material Design 3); chọn một, sau đó tùy chỉnh.

Lưới tương phản lấy mọi cặp mẫu màu và hiển thị tỷ lệ tương phản cộng với một huy hiệu đạt/không đạt cho mỗi cấp WCAG: AA-normal (4.5:1), AA-large (3:1), AAA-normal (7:1), AAA-large (4.5:1). Một cặp được hiển thị là 4.7:1 đạt AA-normal nhưng không đạt AAA-normal; một cặp được hiển thị là 2.1:1 không đạt mọi thứ. Di chuột qua một ô để xem trước cặp dưới dạng văn bản thực tế. Sắp xếp lưới theo tỷ lệ để phát hiện các cặp tệ nhất trước.

Bảng xuất định dạng bảng theo cách mà chuỗi công cụ của bạn mong đợi: thuộc tính tùy chỉnh CSS cho CSS hiện đại, biến Sass cho các đường ống cũ hơn, cấu hình chủ đề Tailwind cho Tailwind CSS, design token JSON (Style Dictionary, đặc tả W3C Design Tokens Community Group) cho hệ thống thiết kế đa nền tảng, hoặc chỉ một danh sách HEX để dán vào Figma. Quy ước đặt tên được giữ nguyên; bạn có thể sao chép và dán trực tiếp vào codebase của bạn.

Lịch sử và bối cảnh

Đo màu CIE thiết lập màu khoa học (1931)

Ủy ban Quốc tế về Chiếu sáng (CIE) đã công bố không gian màu CIE 1931 vào năm 1931, mô tả toán học chính thức đầu tiên về cách con người cảm nhận màu sắc từ các quang phổ điện từ. Mỗi hệ thống màu hiện đại (RGB, HSL, OKLCH, Lab, XYZ) đều xây dựng trên CIE 1931 hoặc trực tiếp hoặc thông qua các biến đổi phái sinh. Công thức độ sáng tương đối mà WCAG sử dụng để tính tương phản là một phép tính có nguồn gốc CIE: nó cân các kênh đỏ, xanh lá cây và xanh dương theo cách mà mắt người phản ứng mạnh đến từng kênh như thế nào (xanh lá cây nhất, xanh dương ít nhất).

WCAG 1.0 giới thiệu hướng dẫn tương phản (1999)

Hướng dẫn Truy cập Nội dung Web 1.0 (W3C, tháng 5 năm 1999) đã giới thiệu tương phản như một tiêu chí truy cập chính thức (Điểm kiểm tra 2.2: đảm bảo các kết hợp màu nền trước và nền sau cung cấp đủ tương phản). Phiên bản đầu tiên là định tính; ngưỡng mơ hồ. WCAG 2.0 (tháng 12 năm 2008) là phiên bản đầu tiên chỉ định các tỷ lệ tương phản số bằng công thức độ sáng tương đối WCAG. Các ngưỡng 4.5:1 và 7:1 trong 2.0 đã được giữ không đổi qua 2.1 (2018) và 2.2 (2023) vì chúng cân bằng tính dễ đọc trên hầu hết các khuyết tật (thị lực kém, mất nhạy cảm tương phản liên quan đến tuổi tác, mù màu) với các ràng buộc thiết kế thực tế.

Các hệ thống thiết kế được mã hóa màu trưởng thành (từ 2014 trở đi)

Material Design của Google (2014), Carbon Design System của IBM (2015) và sự trỗi dậy rộng lớn hơn của design token (Salesforce 2014, Atlassian 2016) tất cả đều đặt màu có thể truy cập làm mối quan tâm cấp hệ thống. Material Design 3 (2021) đã giới thiệu các bảng tông màu (một thang độ sáng 13 bước cho mỗi tông màu) được thiết kế rõ ràng để bất kỳ tông màu 600+ nào trên thang độ sáng đều vượt qua tương phản 4.5:1 trên trắng. Sự thay đổi này đã làm cho các bảng có thể truy cập theo mặc định trở thành thực hành tiêu chuẩn trong các hệ thống thiết kế hiện đại, thay thế cách tiếp cận thương hiệu-trước-khả-năng-truy-cập-thứ-hai cũ hơn.

APCA được đề xuất như một giải pháp thay thế chính xác hơn (từ 2019 trở đi)

Accessible Perceptual Contrast Algorithm (APCA) được Andrew Somers đề xuất bắt đầu từ năm 2019 như một sự thay thế chính xác hơn về mặt cảm nhận cho công thức tương phản WCAG. Tương phản WCAG đánh giá quá cao tính dễ đọc của các màu sáng và đánh giá thấp văn bản tối trên nền tối; APCA sửa những điều này. WCAG 3.0 (kế thừa bản nháp của 2.x, đã được phát triển trong nhiều năm) dự kiến sẽ áp dụng APCA hoặc một thuật toán cải tiến tương tự. Cho đến khi WCAG 3 được phát hành và được áp dụng trong luật, tỷ lệ tương phản WCAG 2.x vẫn là tiêu chuẩn pháp lý và ngành. Công cụ này sử dụng công thức WCAG 2.x.

Design token trở thành tiêu chuẩn đa nền tảng (từ 2020 trở đi)

Nhóm Cộng đồng W3C Design Tokens được hình thành vào năm 2020 để chuẩn hóa design token (tên màu, khoảng cách, các giá trị typography được dịch trên CSS, iOS, Android, Figma và các nền tảng khác). Các công cụ như Style Dictionary, Tokens Studio và đặc tả W3C đang nổi lên đều dựa vào các định dạng token có thể đọc được bằng máy. Các bảng màu có thể truy cập ngày càng được xuất xưởng dưới dạng design token để cùng một bảng đã được kiểm tra được sử dụng ở mọi nơi, loại bỏ chế độ thất bại trong đó trang web vượt qua tương phản nhưng ứng dụng di động thì không.

OKLCH và các không gian màu đồng đều về mặt cảm nhận (từ 2020 trở đi)

CSS Color Module Level 4 (Khuyến nghị Ứng viên 2024) đã thêm OKLCH, OKLab, Lab, LCH và các không gian màu đồng đều về mặt cảm nhận khác vào CSS gốc. OKLCH (được Bjorn Ottosson giới thiệu vào năm 2020) đặc biệt hữu ích để tạo các bảng có thể truy cập vì các bước độ sáng bằng nhau trông bằng nhau với mắt, không giống như HSL nơi các bước độ sáng tạo ra các bước nhảy thị giác không đồng đều. Các trình tạo bảng hiện đại (Leonardo từ Adobe, Polychrom, công cụ này khi được đặt ở chế độ đầu vào OKLCH) tận dụng các không gian này để tạo ra các bảng nhất quán về mặt thị giác hơn đáp ứng các mục tiêu tương phản ở cùng mức độ sáng.

Quy trình thực tế

Thiết kế một bảng thương hiệu mới

Bắt đầu với màu thương hiệu mà bạn phải giữ (màu logo, màu chính được nhóm tiếp thị chấp thuận). Thêm nó vào bảng, sau đó xây dựng các sắc thái (phiên bản sáng hơn) và bóng (phiên bản tối hơn) cùng với các trung tính (trắng, bề mặt, biến thể bề mặt, văn bản). Kiểm tra mọi cặp văn bản-trên-nền chống lại AA-normal. Nếu màu thương hiệu chính của bạn không đạt trên trắng, bạn có hai lựa chọn: chỉ sử dụng nó cho các yếu tố lớn (logo, các điểm nhấn trang trí) và ghép văn bản thân với một biến thể tối hơn, hoặc thỏa hiệp màu thương hiệu một chút. Công cụ này làm nổi lên những lựa chọn đó tại thời điểm thiết kế.

Kiểm toán các quyết định màu của trang web hiện có

Lấy các giá trị màu từ design token hiện có của bạn (thuộc tính tùy chỉnh CSS, cấu hình Tailwind, biến Sass), nhập chúng vào công cụ này và xem lưới tương phản. Các thất bại phổ biến: văn bản xám nhạt trên trắng (thường là #999 hoặc #aaa, cho 2.8:1 hoặc 2.5:1), các nút màu thương hiệu với văn bản trắng trong đó nút có tông trung gian, các màu liên kết trên nền bận. Ghi lại các thất bại với các tỷ lệ của chúng và tiêu chí WCAG nào chúng vi phạm; tài liệu đó là điểm khởi đầu của một kế hoạch khắc phục.

Chọn màu nhấn cho biểu đồ và trực quan hóa dữ liệu

Đối với trực quan hóa dữ liệu, bạn cần các màu nhấn vượt qua tương phản với nền biểu đồ và cũng có thể phân biệt được với nhau cho người dùng có khiếm khuyết thị giác màu sắc. Ghép cặp công cụ này với ColorBrewer (Cynthia Brewer, Penn State, 2002) công bố bảng được thiết kế để duy trì khả năng phân biệt trong các mô phỏng mù màu. Chạy các bảng ứng viên qua cả hai công cụ: tương phản với nền (công cụ này), khả năng phân biệt giữa các màu bảng (ColorBrewer hoặc Viz Palette).

Xây dựng các phần bổ sung chế độ tối cho bảng sáng

Chế độ tối không chỉ là chế độ sáng bị đảo ngược; các yêu cầu tương phản vẫn áp dụng nhưng mắt cảm nhận văn bản sáng trên tối khác với văn bản tối trên sáng (cuộc tranh luận APCA phần lớn là về điều này). Xây dựng bảng tối như một tập hợp song song của các token được đặt tên (surface-dark, text-dark, accent-dark) và kiểm tra mọi cặp chế độ tối chống lại AA. Các thất bại phổ biến của chế độ tối: trắng tinh khiết (#fff) trên đen tinh khiết (#000) gây ra halation (ánh sáng tràn), vì vậy các nhà thiết kế thường sử dụng #e5e5e5 trên #121212; điều này vẫn vượt qua AA nhưng đọc thoải mái hơn.

Tạo các biến thể bảng cho các bề mặt khác nhau

Các giao diện hiện đại có nhiều cấp bề mặt (nền, thẻ, thẻ-nâng cao, modal, popover). Mỗi bề mặt nên ghép cặp chính xác với mọi màu văn bản và điểm nhấn được sử dụng trên đó. Thêm mỗi bề mặt như một mẫu màu bảng và kiểm tra mọi màu văn bản chống lại mọi bề mặt. Lưới tương phản nhanh chóng cho thấy liệu cặp văn bản-trên-modal của bạn có thất bại khi văn bản-trên-thẻ vượt qua hay không (modal thường có một sắc thái nền hơi khác để chỉ ra độ cao, có thể giảm tương phản xuống dưới AA mà bạn không nhận thấy).

Tài liệu tuân thủ cho việc nộp đơn pháp lý hoặc kiểm toán

Đối với tài liệu tuân thủ ADA hoặc EAA, bạn thường cần chứng minh rằng mọi kết hợp màu trong hệ thống thiết kế của bạn vượt qua cấp WCAG có liên quan. Xuất bảng cộng với lưới tương phản như một phần của tuyên bố khả năng truy cập hoặc VPAT (Voluntary Product Accessibility Template) cho sản phẩm của bạn. JSON đã xuất đủ có cấu trúc để cấp dữ liệu vào các báo cáo tuân thủ tự động; lưới trực quan tốt cho việc xem xét của con người.

Các cạm bẫy phổ biến

Xem màu thương hiệu là không thể chạm vào

Mẫu phổ biến nhất: tiếp thị nhấn mạnh vào màu chính của công ty, nhưng nó không đạt tương phản AA trên trắng. Các tùy chọn: chỉ sử dụng màu thương hiệu cho các yếu tố lớn hoặc trang trí (vượt qua thanh văn bản lớn 3:1 khoan dung hơn), làm tối màu một chút cho việc sử dụng văn bản (hầu hết các thương hiệu có tính linh hoạt cho một biến thể tối hơn), hoặc thay đổi màu văn bản thân từ đen sang một màu xám tối ít gay gắt hơn để màu thương hiệu đọc như một điểm nhấn. Các công cụ như Leonardo (từ Adobe) tự động tạo các biến thể có thể truy cập của một màu thương hiệu; ghép chúng với công cụ này để xác minh.

Sử dụng tương phản như là kiểm tra khả năng truy cập duy nhất

Vượt qua tương phản không đảm bảo tính dễ đọc. Tỷ lệ 4.5:1 là sàn; một số người dùng (thị lực kém, mất nhạy cảm tương phản liên quan đến tuổi tác, chứng khó đọc) hưởng lợi từ các tỷ lệ cao hơn. WCAG SC 1.4.6 (Contrast Enhanced, AAA) khuyến nghị 7:1 cho văn bản thân chính xác vì 4.5:1 là tối thiểu, không phải mục tiêu. Kết hợp tương phản cao với kích thước phông chữ đủ (16px+ cho thân), chiều cao dòng đầy đủ (1.5x kích thước phông chữ), và các lựa chọn phông chữ giữ hình dạng chữ cái (tránh trọng lượng siêu mỏng cho văn bản thân).

Quên tương phản phi văn bản (SC 1.4.11)

WCAG 1.4.11 (được thêm vào trong WCAG 2.1, 2018) yêu cầu tương phản 3:1 cho các thành phần UI và các yếu tố đồ họa: viền trường biểu mẫu, đường viền nút, biểu tượng, chỉ báo tiêu điểm. Điều này dễ bị bỏ lỡ vì các nhà thiết kế nghĩ rằng tương phản chỉ áp dụng cho văn bản. Một biểu mẫu sạch với các viền trường màu xám tinh tế trên trắng có thể không đạt 1.4.11 ngay cả khi tất cả văn bản vượt qua 1.4.3. Kiểm toán mọi yếu tố trực quan truyền đạt ý nghĩa hoặc trạng thái, không chỉ văn bản trên nền.

Hiểu sai các quy tắc văn bản lớn

Ngưỡng văn bản lớn của WCAG (3:1 thay vì 4.5:1) áp dụng cho văn bản từ 18pt trở lên (khoảng 24px), hoặc 14pt đậm (khoảng 18.66px đậm). Bất cứ thứ gì nhỏ hơn là văn bản thông thường và cần 4.5:1. Các nhà thiết kế đôi khi áp dụng quy tắc văn bản lớn 3:1 cho tất cả các cấp tiêu đề, nhưng h5 ở 16px là văn bản thông thường theo định nghĩa của WCAG. Kiểm tra kích thước được hiển thị, không phải cấp tiêu đề. Bổ ngữ đậm quan trọng: 18px đậm vượt qua như văn bản lớn; 18px thường thì không.

Dựa vào màu sắc đơn lẻ để truyền đạt thông tin

WCAG 1.4.1 (Use of Color, Cấp A) tách biệt với tương phản. Ngay cả với các tỷ lệ tương phản hoàn hảo, bạn không thể sử dụng màu sắc làm chỉ báo duy nhất của trạng thái (đỏ bằng không hợp lệ, xanh lá cây bằng hợp lệ, xanh dương bằng liên kết). Ghép cặp màu với một dấu hiệu thứ hai: biểu tượng (tam giác cảnh báo cho lỗi), mẫu (gạch chân cho liên kết), hoặc nhãn văn bản (Bắt buộc bên cạnh các trường bắt buộc). Người dùng mù màu (khoảng 8% nam giới, 0.5% nữ giới) và người dùng trên màn hình đơn sắc thang xám dựa vào các dấu hiệu phụ này.

Quên các trạng thái hover, focus, và active

Một nút vượt qua tương phản ở trạng thái mặc định nhưng kiểu :hover làm sáng nó dưới ngưỡng; đường viền :focus là một màu xám tinh tế không đạt 3:1 chống lại nền nút; trạng thái :active đảo ngược màu sắc và kết hợp mới không đạt. Kiểm tra mọi trạng thái tương tác trong lưới tương phản của bạn, không chỉ mặc định. Chỉ báo tiêu điểm đặc biệt quan trọng (SC 2.4.7 Focus Visible, AA): nếu tiêu điểm không hiển thị rõ ràng, người dùng chỉ dùng bàn phím sẽ mất chỗ của họ trên trang.

Quyền riêng tư và xử lý dữ liệu

Các màu bạn thêm, tên bảng và các token đã xuất tất cả ở lại trong trình duyệt của bạn. Các tính toán tương phản chạy trong JavaScript trên máy của bạn; không có gì được tải lên. Điều này ít quan trọng hơn đối với các bảng màu so với tài liệu nhưng vẫn quan trọng khi bảng là một phần của làm mới thương hiệu chưa được công bố hoặc dự án khách hàng bí mật: bạn không muốn nó rò rỉ cho một trình xác thực SaaS bên thứ ba trước khi ra mắt.

Khi trang đã được tải, công cụ hoạt động ngoại tuyến. Bạn có thể ngắt kết nối khỏi internet, xây dựng bảng, chạy các kiểm tra và xuất. Các token đã xuất được tải xuống trực tiếp thông qua hộp thoại lưu thông thường của trình duyệt. Nhiều công cụ màu đám mây (Coolors, Adobe Color, thậm chí một số trình kiểm tra khả năng truy cập) lưu trữ các bảng phía máy chủ và có thể sử dụng chúng cho phân tích hoặc đào tạo; cho công việc bí mật, hãy ưu tiên các công cụ phía máy khách.

Khi không sử dụng công cụ này

Cho mô phỏng mù màu đầy đủ (sử dụng một công cụ chuyên dụng)

Tương phản không giống như khả năng tương thích mù màu. Một bảng có thể vượt qua tất cả các kiểm tra tương phản và vẫn làm rối người dùng mù màu (đỏ và xanh lá cây ở cùng độ sáng trông giống hệt nhau đối với người deuteranope). Đối với mô phỏng mù màu, hãy sử dụng Color Blindness Simulator của Absolutool hoặc chế độ xem khả năng truy cập của Adobe Color, cả hai đều áp dụng các biến đổi màu deuteranopia, protanopia và tritanopia thực tế. Chạy các bảng ứng viên qua cả công cụ này và một trình mô phỏng.

Để tạo các sơ đồ màu từ đầu (sử dụng Leonardo hoặc Coolors)

Công cụ này kiểm tra và kiểm toán các bảng; nó không tạo chúng từ một màu hạt giống duy nhất. Đối với việc tạo bảng từ đầu (các sơ đồ tương tự, bổ sung, bộ ba, bổ sung tách), hãy sử dụng Adobe Color, Coolors, hoặc Leonardo (tạo các biến thể có thể truy cập của một màu thương hiệu). Tạo bằng các công cụ đó, sau đó xác thực với công cụ này. Leonardo cụ thể tạo các màu được nhắm mục tiêu vào các tỷ lệ tương phản cụ thể, đây là định dạng đầu vào tự nhiên cho bước xác minh của công cụ này.

Cho tương phản dựa trên APCA (khi WCAG 3 được phát hành)

Công cụ này sử dụng công thức tương phản WCAG 2.x, là tiêu chuẩn pháp lý và ngành hiện tại. Nếu bạn cụ thể cần thiết kế cho APCA (thuật toán WCAG 3 được đề xuất), hãy sử dụng APCA Contrast Calculator từ Myndex Research. APCA tạo ra các xếp hạng khác (và có thể được cho là chính xác hơn về mặt cảm nhận), đặc biệt cho văn bản tối-trên-tối và sáng-trên-sáng. Cho đến khi WCAG 3 được phê chuẩn và được áp dụng trong luật (có thể vài năm nữa), WCAG 2.x là những gì các kiểm toán viên tuân thủ sẽ kiểm tra.

Cho các cuộc kiểm toán WCAG đầy đủ (sử dụng một công cụ toàn diện)

Tương phản là một tiêu chí trong số hàng chục. Đối với một cuộc kiểm toán khả năng truy cập hoàn chỉnh, hãy sử dụng axe DevTools, Lighthouse, WAVE, hoặc một giải pháp trả phí như Tenon hoặc PowerMapper. Những thứ này kiểm tra tương phản, văn bản alt, ARIA, nhãn biểu mẫu, thứ tự tiêu điểm, cấu trúc tiêu đề và nhiều hơn nữa trong một lần. Sử dụng công cụ này trong quá trình thiết kế bảng và các công cụ toàn diện trong quá trình kiểm tra tích hợp.

Các câu hỏi khác

Sự khác biệt giữa tương phản AA và AAA là gì?

AA là tiêu chuẩn, được pháp luật yêu cầu bởi hầu hết các luật khả năng truy cập (ADA, EAA, AODA, v.v.) và những gì mọi trang web đối mặt công chúng nên đáp ứng. AAA nghiêm ngặt hơn: 7:1 cho văn bản thân, 4.5:1 cho văn bản lớn. AAA thường chỉ được yêu cầu cho nội dung quan trọng cao (các trang web chính phủ ở một số khu vực pháp lý, thông tin y tế và pháp lý, nội dung cho người dùng có thị lực kém là đối tượng chính). Thiết kế cho AAA là hạn chế; ít thương hiệu có thể đáp ứng nó mà không có các giới hạn màu sắc đáng kể. Mục tiêu AA theo mặc định và AAA nơi đối tượng nội dung biện minh cho nó.

Tại sao WCAG sử dụng 4.5:1 cụ thể?

Ngưỡng 4.5:1 đã được chọn để văn bản vẫn dễ đọc cho người dùng có thị lực 20/40 (ngưỡng cho mù pháp lý ở nhiều khu vực pháp lý) mà không cần phóng đại hỗ trợ. Đó cũng là khoảng tỷ lệ tương phản tại đó người dùng thiếu thị giác màu sắc có thể phân biệt một cách đáng tin cậy giữa nền trước và nền sau. Số được hiệu chỉnh thực nghiệm từ nghiên cứu thị lực; nó không phải là tùy tiện. 7:1 của AAA tương ứng đại khái với thị lực 20/80, đáp ứng nhiều khuyết tật hơn đáng kể.

Công thức tương phản hoạt động như thế nào?

Chuyển đổi mỗi màu từ sRGB sang độ sáng tương đối bằng công thức: hiệu chỉnh gamma mỗi kênh (R, G, B) bằng cách áp dụng một hàm từng phần (tuyến tính cho các giá trị thấp, hàm mũ cho các giá trị cao), sau đó cân bằng 0.2126 R + 0.7152 G + 0.0722 B (độ nhạy của mắt người tương đối với mỗi kênh). Tỷ lệ tương phản giữa hai màu là (L1 + 0.05) / (L2 + 0.05) trong đó L1 là độ sáng sáng hơn và L2 là tối hơn. Bù đắp 0.05 tính đến phản xạ màn hình môi trường. Kết quả là một số giữa 1 (giống nhau) và 21 (tối đa).

Tôi có nên lo lắng về tương phản cho văn bản placeholder trong các trường biểu mẫu?

Có. Văn bản placeholder được tính là văn bản theo WCAG và phải đáp ứng tương phản 4.5:1. Mặc định trình duyệt cho placeholder là màu xám nhạt (#a9a9a9 trong hầu hết các trình duyệt), không đạt trên trắng. Ghi đè bằng CSS: ::placeholder { color: #595959; } hoặc tương tự vượt qua AA. Tốt hơn nữa, hãy tránh placeholder hoàn toàn cho các trường quan trọng; sử dụng các nhãn hiển thị phía trên trường và dự trữ placeholder cho định dạng ví dụ. Các mẫu nhãn nổi kết hợp nhãn hiển thị và sự rõ ràng ví dụ.

Tương phản có áp dụng cho các nút và trường biểu mẫu bị vô hiệu hóa không?

Không. WCAG SC 1.4.3 miễn trừ rõ ràng các điều khiển bị vô hiệu hóa vì sự xuất hiện bị tắt tự nó là một tín hiệu trực quan rằng điều khiển không khả dụng. Các nút bị vô hiệu hóa thường mờ dần đến khoảng 38% độ mờ và sẽ không đạt tương phản trong trạng thái bị vô hiệu hóa của chúng theo thiết kế. Tuy nhiên, trạng thái bị vô hiệu hóa vẫn phải có thể phân biệt rõ ràng với trạng thái được kích hoạt, vì vậy đừng chỉ loại bỏ tất cả các xử lý trực quan; sử dụng một sự khác biệt trực quan rõ ràng cộng với một thuộc tính bị vô hiệu hóa có thể truy cập trình đọc màn hình.

Còn tương phản cho nội dung đồ họa như biểu đồ và biểu tượng thì sao?

WCAG 1.4.11 Non-text Contrast (được thêm vào trong 2.1) yêu cầu tương phản 3:1 cho các thành phần UI (nút, viền biểu mẫu, chỉ báo tiêu điểm) và các yếu tố đồ họa có ý nghĩa (biểu tượng truyền đạt trạng thái, các yếu tố biểu đồ phân biệt các chuỗi dữ liệu). Ngưỡng 3:1 thấp hơn 4.5:1 cho văn bản vì đồ họa thường có khu vực hiển thị lớn hơn. Đồ họa trang trí không truyền đạt ý nghĩa được miễn trừ. Áp dụng 3:1 cho mọi biểu tượng truyền đạt trạng thái (mắt mở cho hiển thị, X cho xóa, dấu kiểm cho được chọn) và mọi phân đoạn biểu đồ cần phải được phân biệt.