PetexSpace
← Quay lại blog

Khoa học về độ tương phản màu sắc: Tỷ lệ tương phản WCAG 2.1 so với các thuật toán tri giác APCA

PetexSpace

Các tiêu chuẩn về khả năng tiếp cận kỹ thuật số đảm bảo rằng các giao diện tương tác luôn có thể sử dụng được đối với những người có thị lực khác nhau, người bị suy giảm thị lực màu và trong các điều kiện quan sát môi trường bị hạn chế. Trong hơn mười lăm năm qua, tỷ lệ tương phản độ chói tương đối của Hướng dẫn Tiếp cận Nội dung Web (WCAG) 2.x đã đóng vai trò là thước đo quy chuẩn chung trên toàn thế giới cho khả năng đọc hiểu kỹ thuật số.

Dù được áp dụng rộng rãi trong các công cụ kiểm thử tự động và các khung pháp lý tuân thủ, mô hình toán học đằng sau WCAG 2.1 lại mắc phải những thiếu sót sâu sắc về mặt tri giác. Các nhà thiết kế và kỹ sư phụ trách khả năng tiếp cận thường xuyên gặp phải những tình huống mà các cặp màu vượt qua ngưỡng kiểm định của WCAG 2.1 vẫn rất khó đọc trên nền tối, trong khi những cặp màu sáng trên nền tối có tính thẩm mỹ cao và dễ đọc rõ ràng lại trượt các bài kiểm tra tuân thủ.

Thuật toán Tương phản Tri giác Nâng cao (APCA), do Tiến sĩ Andrew Somers phát triển cho đặc tả WCAG 3.0 sắp tới, giải quyết các hạn chế này thông qua một mô hình dựa trên bằng chứng về thị giác con người. Bài phân tích này đi sâu vào sinh học võng mạc con người, việc suy dẫn toán học của cả hai mô hình, những lỗi mang tính hệ thống của WCAG 2.1 trong các giao diện chế độ tối hiện đại, cơ chế hoạt động của APCA và cách triển khai quy trình kiểm tra độ tương phản chính xác ở phía client-side.

1. Sinh học thị giác con người và vật lý học về tri giác màu sắc

Để thiết kế văn bản kỹ thuật số dễ tiếp cận, cần hiểu rõ cách hệ thống thị giác con người xử lý bức xạ điện từ vật lý thành độ tương phản được tri giác. Mắt người không phải là một quang kế tuyến tính, mà là một bộ chuyển đổi sinh học được tối ưu hóa cho việc phát hiện đường biên, ngữ cảnh không gian và các gradient độ chói tương đối.

+-------------------------------------------------------------------------+
|                        HUMAN RETINAL TRANSDUCTION                       |
|                                                                         |
|  [Incident Light Waves (Photons)]                                       |
|                |                                                        |
|                v                                                        |
|  [Cornea & Crystalline Lens] (Refraction & Flare Attenuation)           |
|                |                                                        |
|                v                                                        |
|  [Retinal Photoreceptor Layer]                                          |
|    +-- Rods: Scotopic vision (~120 million, high sensitivity, achromatic) |
|    +-- Cones: Photopic vision (~6 million, trichromatic spectral tuning) |
|          |-- L-Cones (Erythrolabe): Peak ~560 nm (Red spectrum)          |
|          |-- M-Cones (Chlorolabe):  Peak ~530 nm (Green spectrum)        |
|          |-- S-Cones (Cyanolabe):   Peak ~420 nm (Blue spectrum)         |
|                |                                                        |
|                v                                                        |
|  [Horizontal, Bipolar & Ganglion Cells] (Local Lateral Inhibition)      |
|                |                                                        |
|                v                                                        |
|  [Optic Nerve -> Visual Cortex (V1)]                                    |
|    +-- Spatial Frequency Filtering (Band-pass modulation)               |
|    +-- Non-Linear Lightness Companding (Stevens' Power Law)             |
+-------------------------------------------------------------------------+

Cơ chế thụ cảm quang: Tế bào que và tế bào nón

Võng mạc con người chứa hai nhóm tế bào thụ cảm quang chính:

  1. Tế bào que (Rods): Cực kỳ nhạy cảm với mức ánh sáng yếu (điều kiện thị giác ban đêm - scotopic). Tế bào que không thể phân biệt sắc độ và có độ phân giải không gian kém, dễ bị bão hòa dưới mức độ chói của các màn hình thông thường.
  2. Tế bào nón (Cones): Hoạt động dưới điều kiện ánh sáng ban ngày và màn hình kỹ thuật số (thị giác ban ngày - photopic). Con người sở hữu thị giác ba màu (trichromatic) nhờ ba loại sắc tố thị giác opsin trong tế bào nón:* **Tế bào nón L (Bước sóng dài):** Hấp thụ cực đại vào khoảng 560 nm (vàng-lục, thường được gọi chung là đỏ). * **Tế bào nón M (Bước sóng trung bình):** Hấp thụ cực đại vào khoảng 530 nm (xanh lục). * **Tế bào nón S (Bước sóng ngắn):** Hấp thụ cực đại vào khoảng 420 nm (xanh lam).

Vì các tế bào nón L và M chiếm ưu thế tại hố trung tâm (fovea centralis) và chiếm tổng cộng khoảng 98 phần trăm tế bào nón thụ cảm quang của con người, vỏ não thị giác cực kỳ nhạy cảm với năng lượng quang phổ màu lục và màu đỏ. Màu xanh lam đóng góp rất ít vào độ sáng được tri giác, mặc dù nó đóng vai trò quan trọng trong hiện tượng tán sắc (chromatic aberration) và điều hòa nhịp sinh học.

Tri giác độ sáng phi tuyến tính và tần số không gian

Cảm nhận của con người về độ sáng (L∗L^*) không tỷ lệ tuyến tính với bức xạ vật lý (YY). Theo Định luật Weber-Fechner và Định luật lũy thừa Stevens, cường độ được tri giác tuân theo một hàm lũy thừa logarit:

S=k⋅IβS = k \cdot I^\beta

Trong thị giác con người, số mũ β\beta xấp xỉ từ 0.330.33 đến 0.430.43. Khi một màn hình OLED hoặc LCD tăng gấp đôi công suất phát quang vật lý từ 100 nit lên 200 nit, người quan sát chỉ cảm nhận được một sự gia tăng nhỏ về độ sáng.

Độ tương phản được tri giác phụ thuộc rất lớn vào tần số không gian (spatial frequency), đại lượng đo mật độ góc của các chu kỳ sáng tối trên một góc thị giác nhất định.

Low Spatial Frequency (Headlines, Buttons):
+-------------------------------+  Large, solid blocks of color.
|      HEAVY FONT TEXT          |  Easy for visual cortex to detect
+-------------------------------+  even with lower luminous contrast.

High Spatial Frequency (Body Copy, Thin Strokes):
|||||||||||||||||||||||||||||||||  Fine, repeated optical lines.
|||||||||||||||||||||||||||||||||  Requires significantly higher luminous
|||||||||||||||||||||||||||||||||  contrast to resolve against background.

Một phông chữ dày, đậm (tần số không gian thấp) tạo thành các mảng lớn, ổn định trên võng mạc, giúp các tế bào ngang dễ dàng phân biệt các cạnh thông qua cơ chế ức chế bên (lateral inhibition). Ngược lại, một phông chữ nội dung thanh mảnh với trọng số nét 300 hiển thị ở kích thước 12 pixel (tần số không gian cao) chỉ chiếm một phần rất nhỏ của một độ trên võng mạc. Cơ chế khử răng cưa subpixel làm mờ các nét chữ mảnh này vào nền, đòi hỏi độ tương phản độ chói cao hơn đáng kể để đạt được khả năng đọc rõ ràng.

2. Phân tích toán học về độ chói tương đối của WCAG 2.1

Mô hình tương phản của WCAG 2.1 dựa trên người quan sát so màu chuẩn CIE 1931 để ánh xạ các tọa độ hiển thị sRGB thành các giá trị trắc quang tuyến tính.

Chuyển đổi sRGB sang bức xạ trắc quang tuyến tính

Các màn hình sRGB tiêu chuẩn áp dụng một hàm truyền phi tuyến (đường cong gamma) để tối ưu hóa việc lượng tử hóa kỹ thuật số 8-bit cho tri giác của con người. Để tính toán tỷ lệ ánh sáng vật lý, các kênh màu RGB 8-bit (CsRGB∈[0,255]C_{\text{sRGB}} \in [0, 255]) phải được chuẩn hóa về [0.0,1.0][0.0, 1.0] và chuyển đổi sang bức xạ tuyến tính (ClinearC_{\text{linear}}):

Cnorm=CsRGB255C_{\text{norm}} = \frac{C_{\text{sRGB}}}{255}
Clinear={Cnorm12.92if Cnorm≤0.04045(Cnorm+0.0551.055)2.4if Cnorm>0.04045C_{\text{linear}} = \begin{cases} \frac{C_{\text{norm}}}{12.92} & \text{if } C_{\text{norm}} \le 0.04045 \\ \left( \frac{C_{\text{norm}} + 0.055}{1.055} \right)^{2.4} & \text{if } C_{\text{norm}} > 0.04045 \end{cases}

Khi các kênh đỏ, lục và lam đã được chuyển đổi sang không gian tuyến tính, độ chói tương đối (YY) được tính toán bằng cách sử dụng các hệ số hàm hiệu suất sáng trắc quang CIE 1931:

Y=0.2126⋅Rlinear+0.7152⋅Glinear+0.0722⋅BlinearY = 0.2126 \cdot R_{\text{linear}} + 0.7152 \cdot G_{\text{linear}} + 0.0722 \cdot B_{\text{linear}}

Các hệ số này phản ánh độ nhạy rõ rệt của mắt người đối với photon màu lục (71.52%71.52\%) so với màu đỏ (21.26%21.26\%) và màu lam (7.22%7.22\%).

Công thức tỷ lệ tương phản WCAG 2.1

Sau khi tính toán được giá trị độ chói tương đối của màu chữ tiền cảnh và màu nền, WCAG 2.1 tính toán tỷ lệ tương phản (CRCR) như sau:

CR=L1+0.05L2+0.05CR = \frac{L_1 + 0.05}{L_2 + 0.05}

Tại đây, L1L_1 biểu thị độ chói tương đối của màu sáng hơn, và L2L_2 biểu thị độ chói tương đối của màu tối hơn, đảm bảo CR≥1.0CR \ge 1.0.

Hằng số +0.05+0.05 là một giá trị bù thực nghiệm nhằm tính đến độ rọi phòng môi trường phản xạ khỏi bề mặt màn hình (hiện tượng lóa gương). Tỷ lệ thu được mang lại các giá trị từ 1:11:1 (hai màu giống hệt nhau) đến 21:121:1 (màu đen thuần trên nền trắng thuần).

WCAG 2.1 thiết lập các ngưỡng tuân thủ cố định:

  • Cấp độ AA: 4.5:14.5:1 đối với văn bản thông thường (<18pt< 18\text{pt} hoặc <14pt< 14\text{pt} in đậm), và 3.0:13.0:1 đối với văn bản lớn (≥18pt\ge 18\text{pt} hoặc ≥14pt\ge 14\text{pt} in đậm).
  • Cấp độ AAA: 7.0:17.0:1 đối với văn bản thông thường, và 4.5:14.5:1 đối với văn bản lớn.

3. Những lỗ hổng chí mạng của WCAG 2.1 trong các giao diện kỹ thuật số hiện đại

Mặc dù đơn giản trong tính toán, công thức toán học của WCAG 2.1 bộc lộ nhiều điểm hạn chế trên các bố cục màn hình hiện đại, kiểu chữ tương thích (responsive typography) và các giao diện mang chủ đề tối.

+------------------------------------------------------------------------+
|                    THE WCAG 2.1 POLARITY BLINDNESS                     |
|                                                                        |
|  Light Mode (Positive Polarity):      Dark Mode (Negative Polarity):   |
|                                                                        |
|  +------------------------------+     +------------------------------+ |
|  | Black Text on Mid-Gray       |     | White Text on Mid-Gray       | |
|  | #111111 on #767676           |     | #FFFFFF on #767676           | |
|  | WCAG: 4.54:1 (PASS AA)       |     | WCAG: 4.54:1 (PASS AA)       | |
|  |                              |     |                              | |
|  | [ Perceptually Legible ]     |     | [ Blurry / Halation Glare ]  | |
|  +------------------------------+     +------------------------------+ |
|                                                                        |
|  WCAG assigns an identical 4.54:1 ratio to both pairs, ignoring the    |
|  fact that pupil constriction in dark mode creates optical flare.     |
+------------------------------------------------------------------------+

Sự mù phân cực (Sai lầm về tính đối xứng)

Khiếm khuyết rõ ràng nhất trong WCAG 2.1 là tính đối xứng toán học. Công thức này xử lý văn bản tối trên nền sáng (phân cực dương) hoàn toàn giống với văn bản sáng trên nền tối (phân cực âm).

Trong sinh lý học mắt người, văn bản tối trên nền sáng hoạt động khác hẳn so với văn bản sáng trên nền tối:

  • Phân cực dương (Tối trên Sáng): Phần nền sáng chiếm ưu thế cung cấp một lượng lớn photon vào mắt, khiến đồng tử mống mắt co lại. Việc co đồng tử làm tăng độ sâu trường ảnh thị giác, làm sắc nét tiêu điểm võng mạc và giảm hiện tượng quang sai cầu.
  • Phân cực âm (Sáng trên Tối): Phần nền tối khiến đồng tử giãn ra để thu nhận nhiều ánh sáng hơn. Đồng tử giãn làm giảm độ sâu trường ảnh và khuếch đại quang sai. Ngoài ra, các nét chữ sáng bị nhòe sang các pixel tối lân cận trên võng mạc (hiện tượng quang học được gọi là tán xạ hoặc quầng sáng quang học - halation). Văn bản màu trắng mảnh trên nền đen sâu có xu hướng bị lóa sáng, khiến các ký tự bị đứt gãy hoặc trông mờ đi.

WCAG 2.1 đánh giá #111111 trên #767676 và #ffffff trên #767676 có cùng tỷ lệ tương phản là 4.54:14.54:1. Trên thực tế, chữ đen trên nền xám rất dễ đọc, trong khi chữ trắng trên cùng nền xám đó lại tạo ra độ chói khó chịu và làm giảm tốc độ đọc.

Các thất bại trong chế độ tối và những kết quả đạt chuẩn sai lệch

Hằng số lóa +0.05+0.05 vốn được hiệu chỉnh dựa trên các màn hình CRT đời đầu trong môi trường văn phòng đủ sáng. Trên các màn hình OLED hiện đại và các tấm nền độ tương phản cao, nó làm lệch tỷ lệ một cách không cân xứng ở phần đáy của dải quang phổ độ chói:

  • Dương tính giả (False Positives): Màu xanh lam bão hòa thuần túy (#0000FF) trên nền đen thuần (#000000) đạt khoảng 2.44:12.44:1 theo WCAG 2.1. Tuy nhiên, màu cam bão hòa (#FF5500) trên nền đen thuần lại đạt khoảng 6.1:16.1:1, vượt qua ngưỡng WCAG AA một cách dễ dàng mặc dù nhìn rất chói mắt và gây mỏi mắt nếu đọc trong thời gian dài.
  • Âm tính giả (False Negatives): Chữ xám dịu (#8A8A8A) trên thẻ nền màu than sẫm (#181818) mang lại trải nghiệm đọc rõ ràng, không gây mỏi mắt cho các tiêu đề lớn trên màn hình OLED. Thế nhưng WCAG 2.1 lại đánh dấu sự kết hợp này là không đạt chuẩn tiếp cận, khiến các lập trình viên phải đổi sang chữ trắng có độ tương phản gay gắt, gây ra hiện tượng lóa mắt.

Không tính đến tần số không gian

WCAG 2.1 áp dụng một ngưỡng cắt nhị phân tại 18pt (24px) hoặc 14pt in đậm (18.66px). Quy chuẩn này không hề xét đến:

  1. Độ đậm liên tục của phông chữ (từ 100 đến 900).
  2. Các biến thể chiều cao x-height của kiểu chữ (phông chữ có x-height cao như Roboto so với phông chữ nhỏ gọn như Futura).
  3. Khoảng cách quan sát (màn hình máy tính để bàn ở khoảng cách 60 cm so với điện thoại thông minh ở khoảng cách 25 cm).

Một phông chữ siêu mảnh nét 100 ở kích thước 17 pixel chịu chung yêu cầu 4.5:14.5:1 như một phông chữ đậm nét 800 ở cùng kích thước chính xác, mặc dù phông chữ mảnh chỉ sở hữu một phần nhỏ độ rộng nét vật lý trên võng mạc.

4. Kiến trúc của Thuật toán Tương phản Tri giác Nâng cao (APCA)

Thuật toán Tương phản Tri giác Nâng cao (APCA) là một mô hình thực nghiệm được phát triển chuyên biệt cho các màn hình kỹ thuật số tự phát sáng. Được thiết kế bởi Tiến sĩ Andrew Somers, APCA mô hình hóa thị giác không gian, sự thích ứng võng mạc và độ tương phản ngưỡng của con người trên toàn bộ quang phổ thị giác.

+------------------------------------------------------------------------+
|                          APCA PROCESSING PIPELINE                      |
|                                                                        |
|  [Foreground sRGB]                     [Background sRGB]               |
|         |                                      |                       |
|         v                                      v                       |
|  [Linearize & Clamping]                 [Linearize & Clamping]         |
|         |                                      |                       |
|         v                                      v                       |
|  [Spectral Weighting: Y_txt]            [Spectral Weighting: Y_bg]     |
|         |                                      |                       |
|         v                                      v                       |
|  [Perceptual Companding]                [Perceptual Companding]        |
|     (Power Exp: 0.57)                       (Power Exp: 0.56)          |
|         |                                      |                       |
|         +-------------------+------------------+                       |
|                             |                                          |
|                             v                                          |
|              [Difference & Polarity Evaluation]                        |
|                             |                                          |
|            +----------------+----------------+                         |
|            | Positive Polarity               | Negative Polarity       |
|            | (Dark text on light bg)         | (Light text on dark bg) |
|            v                                 v                         |
|    [Soft-Clamp Scaling]              [Soft-Clamp Scaling]              |
|            |                                 |                         |
|            +----------------+----------------+                         |
|                             |                                          |
|                             v                                          |
|                 [Signed Light Contrast: Lc]                            |
|             (e.g., Lc +75 or Lc -60, from 0 to 110)                    |
|                             |                                          |
|                             v                                          |
|            [Lookup Matrix: Font Size & Font Weight]                    |
+------------------------------------------------------------------------+

Trọng số quang phổ và nén dải động tri giác (Perceptual Companding)

APCA sử dụng các hệ số trọng số quang phổ được cập nhật để tính toán độ chói tương đối, phản ánh đúng các màu cơ bản của màn hình hiện đại và phản ứng của tế bào nón ở người:

Ycolor=0.2126729⋅Rlinear+0.7151522⋅Glinear+0.0721750⋅BlinearY_{\text{color}} = 0.2126729 \cdot R_{\text{linear}} + 0.7151522 \cdot G_{\text{linear}} + 0.0721750 \cdot B_{\text{linear}}

Khác với WCAG 2.1 vốn sử dụng tỷ lệ tuyến tính, APCA áp dụng cơ chế nén dải động lũy thừa tri giác phi tuyến tính để mô hình hóa cách các tế bào thụ cảm quang thích nghi với độ chói nền xung quanh:

  • Nếu độ chói nền YbgY_{\text{bg}} chiếm ưu thế, số mũ nén cho phần nền xấp xỉ là:
Ybg, comp=Ybg0.56Y_{\text{bg, comp}} = Y_{\text{bg}}^{0.56}
  • Đối với tiền cảnh văn bản, số mũ nén dịch chuyển nhẹ:
Ytxt, comp=Ytxt0.57Y_{\text{txt, comp}} = Y_{\text{txt}}^{0.57}

Phân cực và Độ tương phản Ánh sáng có dấu (LcL^c)

APCA xuất ra một giá trị số có dấu gọi là Độ tương phản Ánh sáng (Light Contrast - LcL^c), giới hạn trong khoảng từ 00 đến xấp xỉ 110110:

  • LcL^c mang dấu dương (++): Biểu thị phân cực dương (văn bản tối trên nền sáng). Ví dụ, Lc+75L^c +75 đại diện cho chữ đen có độ tương phản cao trên nền trắng sạch.
  • LcL^c mang dấu âm (−-) : Biểu thị phân cực âm (văn bản sáng trên nền tối). Ví dụ, Lc−65L^c -65 đại diện cho chữ màu trắng hoặc bạc trên thẻ nền xám sẫm.

Sự khác biệt về dấu này giúp các nhà thiết kế và các công cụ linter tự động phân biệt được giữa các phương thức đọc và áp dụng các ngưỡng riêng biệt theo từng chiều phân cực.

Ma trận khả năng đọc động của APCA

Thay vì áp đặt các con số tĩnh như 4.5:14.5:1 hoặc 3.0:13.0:1, APCA kết hợp các giá trị tương phản LcL^c với một ma trận tra cứu động đối chiếu giữa trọng số và kích thước phông chữ:

Ngưỡng LcL^c tối thiểuKích thước & Trọng số phông khuyến nghịPhạm vi áp dụng nội dung
Lc≥90L^c \ge 9012px Regular (400), 10px Bold (700)Chi tiết siêu nhỏ, thông báo pháp lý, dòng bản quyền.
Lc≥75L^c \ge 7514px Regular (400), 12px Bold (700)Văn bản nội dung chuẩn, bài viết dài, tài liệu hướng dẫn.
Lc≥60L^c \ge 6018px Regular (400), 14px Bold (700)Thành phần UI lớn, trường nhập liệu chính, liên kết điều hướng.
Lc≥45L^c \ge 4524px Regular (400), 18px Bold (700)Tiêu đề lớn hiển thị, banner chính, mức tối thiểu cho trạng thái disabled.
Lc<30L^c < 30Chỉ dành cho các phần tử không phải văn bảnThành phần trang trí phụ, họa tiết nền. Không được phép dùng cho văn bản.
// Concise APCA calculation pipeline implementation
export function calculateAPCA(textRGB: [number, number, number], bgRGB: [number, number, number]): number {
  // Linearize normalized 8-bit channels
  const linearize = (val: number): number => Math.pow(val / 255, 2.4);

  const R_txt = linearize(textRGB[0]);
  const G_txt = linearize(textRGB[1]);
  const B_txt = linearize(textRGB[2]);

  const R_bg = linearize(bgRGB[0]);
  const G_bg = linearize(bgRGB[1]);
  const B_bg = linearize(bgRGB[2]);

  // Spectral luminance weighting
  const Y_txt = 0.2126729 * R_txt + 0.7151522 * G_txt + 0.0721750 * B_txt;
  const Y_bg = 0.2126729 * R_bg + 0.7151522 * G_bg + 0.0721750 * B_bg;

  // Soft-clamp threshold for near-black handling
  const clampThreshold = 0.022;
  const Y_txt_clamped = Y_txt > clampThreshold ? Y_txt : Y_txt + Math.pow(clampThreshold - Y_txt, 1.414);
  const Y_bg_clamped = Y_bg > clampThreshold ? Y_bg : Y_bg + Math.pow(clampThreshold - Y_bg, 1.414);

  // Perceptual companding exponents
  const bgComp = Math.pow(Y_bg_clamped, 0.56);
  const txtComp = Math.pow(Y_txt_clamped, 0.57);

  // Determine polarity and calculate Lc
  let Lc = 0;
  if (Y_bg_clamped >= Y_txt_clamped) {
    // Positive Polarity: Dark text on light background
    Lc = (bgComp - txtComp) * 1.14 * 100;
  } else {
    // Negative Polarity: Light text on dark background
    Lc = (bgComp - txtComp) * 1.14 * 100;
  }

  return Math.round(Lc * 10) / 10;
}

5. Kỹ thuật xây dựng các công cụ hỗ trợ tiếp cận trong môi trường sản xuất tại PetexSpace

Quá trình chuyển đổi từ WCAG 2.1 sang APCA là một lộ trình liên tục xuyên suốt các hệ thống thiết kế hiện đại. Các nền tảng quy mô lớn cần tuân thủ các quy định pháp lý hiện hành (chẳng hạn như Mục 508 và Đạo luật Khả năng Tiếp cận Châu Âu) trong khi vẫn nỗ lực đem lại khả năng đọc hiểu tri giác chân thực cho người dùng thực tế.

+------------------------------------------------------------------------+
|             PetexSpace In-Browser Contrast Evaluation Model            |
|                                                                        |
|  [Hex / RGB / HSL Input] ---> [State Normalizer Engine]                |
|                                      |                                 |
|                  +-------------------+-------------------+             |
|                  |                                       |             |
|                  v                                       v             |
|       [WCAG 2.1 Evaluator]                     [APCA Engine]           |
|        - Relative Luminance Y                   - Perceptual Compand   |
|        - Fixed 4.5:1 / 3:1 Check                - Signed Lc Score      |
|        - AA / AAA Pass / Fail                   - Weight/Size Matrix   |
|                  |                                       |             |
|                  +-------------------+-------------------+             |
|                                      |                                 |
|                                      v                                 |
|                  [Unified Reactive Diagnostics UI]                     |
|                  - Dual Score Compliance Table                         |
|                  - Real-Time Font Size Recommendations                 |
+------------------------------------------------------------------------+

Kiến trúc tính điểm kép trong Bộ công cụ tương phản PetexSpace

Công cụ đánh giá độ tương phản APCA và WCAG của PetexSpace thực thi đồng thời cả hai mô hình toán học ngay trong bộ nhớ trình duyệt. Khi cung cấp hai token màu, các kỹ sư sẽ nhận được:

  1. Xác minh tuân thủ quy chuẩn WCAG 2.1: Các tỷ lệ tức thời, huy hiệu tuân thủ (AA/AAA) và các trường hợp ngoại lệ cho văn bản lớn phục vụ việc kiểm toán hồ sơ kỹ thuật.
  2. Đánh giá tri giác APCA: Các giá trị LcL^c có dấu đi kèm với một ma trận kiểu chữ tương tác, chỉ ra kích thước và trọng số phông chữ tối thiểu cần thiết để đạt độ dễ đọc tối ưu.

Các nhà thiết kế cũng có thể kết hợp việc kiểm tra độ tương phản với công cụ của PetexSpace để trích xuất bảng màu tiếp cận, lấy các màu sắc được trích xuất từ hình ảnh thương hiệu và tự động sắp xếp chúng thành các cặp token nền - chữ đạt chuẩn.

Quyền riêng tư theo kiến trúc và tính toán trên trình duyệt

Các token thiết kế, màu sắc nhận diện thương hiệu chưa công bố và bố cục giao diện thường chứa các tài sản thiết kế bảo mật. Tuân thủ theo các nguyên tắc kiến trúc của PetexSpace, mọi phép tính độ tương phản đều được thực thi trực tiếp trên trình duyệt.

Màu sắc, chuỗi hex và các ma trận tính toán được xử lý cục bộ ngay trong bộ nhớ trình duyệt mà không gửi bất kỳ yêu cầu đo kiểm từ xa (telemetry) nào tới các server từ xa. Điều này mang lại cho các nhóm thiết kế và kỹ sư phụ trách khả năng tiếp cận một không gian làm việc an toàn, bảo vệ quyền riêng tư tuyệt đối để tự tin xây dựng các giao diện dễ tiếp cận.

Bài viết liên quan

CryptographyXác thựcSecurity

Kiến trúc của Mật khẩu Một lần Dựa trên Thời gian: Khám phá RFC 6238 và Cơ chế Tạo HMAC

Phân tích toán học và giao thức toàn diện về Mật khẩu Một lần Dựa trên Thời gian (TOTP) theo chuẩn RFC 6238, khám phá kỹ thuật dynamic truncation, bộ đếm bước HMAC-SHA1, xử lý lệch đồng hồ và thực thi an toàn ngay trên trình duyệt.

PetexSpace
CryptographyData EncodingMã QR

Giải phẫu mã QR: Cơ chế sửa lỗi Reed-Solomon và mã hóa ma trận

Khám phá chuyên sâu về mặt toán học của mã QR chuẩn ISO/IEC 18004, phân tích chi tiết số học trường Galois GF(2^8), đa thức sinh, cơ chế sửa lỗi Reed-Solomon và kỹ thuật kết xuất ma trận ngay trên trình duyệt.

PetexSpace
CryptographyWeb CryptoSecurity

Tính ngẫu nhiên mật mã học trong trình duyệt: Math.random so với crypto.getRandomValues

Nghiên cứu chuyên sâu về kiến trúc giữa bộ tạo số giả ngẫu nhiên (PRNG) và bộ tạo số giả ngẫu nhiên an toàn về mặt mật mã (CSPRNG) trong môi trường runtime trình duyệt, phân tích chi tiết xorshift128+, các cuộc tấn công tái tạo trạng thái và Web Cryptography API.

PetexSpace
CryptographyData EncodingBase32

So sánh Base32 và Base64: Khác biệt cấu trúc, quy tắc đệm và ứng dụng mật mã học

Đặc tả kỹ thuật chuyên sâu về các chuẩn mã hóa nhị phân sang văn bản theo RFC 4648, đối chiếu cơ chế đóng gói bitwise, ma trận đệm (padding), tính công thái học của bảng chữ cái và quá trình thực thi trực tiếp trên trình duyệt giữa Base32 và Base64.

PetexSpace