"Đẹp" là chuyện gu; "dễ đọc" thì đo được. Chữ xám nhạt trông ổn trên màn hình tốt và biến mất trên điện thoại giữa ban ngày — chọn bằng mắt thì sớm muộn cũng dính.
python3 addons/gohud/tools/check_contrast.py| Cái gì | Mức yêu cầu |
|---|---|
| Chữ thân bài | 4.5 : 1 |
| Chữ lớn (từ 24px trở lên) | 3 : 1 |
| Viền và biểu tượng màu nhấn | 3 : 1 |
| Viền trang trí | 2 : 1 — WCAG không áp quy tắc 3:1 cho phần trang trí |
| Hai bề mặt kề nhau | 1.12 : 1 — đủ để một tấm thẻ đọc ra là tách khỏi nền của nó |
Chữ cùng tông trên nền pha cùng tông
Cái bẫy này xuất hiện ba lần trong chính mã nguồn này — nút đang bấm (tấm nền màu nhấn, nhãn màu nhấn), nút nguy hiểm, và chip. Nó trông đẹp trong một ô màu mẫu rồi sụp đổ ngay khi bị đo, vì hai bên chung một tông màu nên chẳng chênh nhau chút độ sáng nào.
Vì vậy màu nhãn không được chọn bằng tay. Trình dựng theme và GoSkin mỗi bên đều
đẩy độ sáng — và chỉ độ sáng thôi — cho tới khi vượt ngưỡng trên đúng tấm nền mà chữ thật sự
nằm lên. Tông màu và độ bão hòa được giữ nguyên, nên bảng màu giữ được cá tính và đổi nó thì độ tương phản vẫn còn.
Màu đọc như chữ và màu tô như mảng muốn hai điều ngược nhau
Trên theme sáng, màu cảnh báo phải tối đi mới đọc được khi làm chữ (#96500A).
Khi phần tô của thanh kế thừa màu đó, thanh kinh nghiệm hóa nâu. Riêng màu thì không cứu được:
vàng vốn dĩ đã sáng, nên nó vượt 3:1 dù rãnh chẳng xám chút nào, còn làm rãnh tối đi lại khiến mọi thứ
tệ hơn (1.52 → 1.06).
Nên hai thứ được tách ra. Màu thì giữ nguyên độ rực — bảng màu mang theo các màu chỉ dùng để tô như
warning_vivid. Phần viền gánh lấy độ tương phản — GoSkin vẽ một đường viền
1dp lên bất kỳ phần tô nào không đạt nổi 3:1 so với rãnh của nó, để câu hỏi "đầy đến đâu rồi" vẫn đọc được.
MY_LIGHT = dict(
warning=hexc("9A5407"), # đọc như chữ
warning_vivid=hexc("F2A007"), # tô lên thanh
)*_vivid, một phần tô ra quá tối sẽ khiến
trình dựng in ra the bar looks drab — add warning_vivid to the palette (thanh trông xỉn màu —
hãy thêm warning_vivid vào bảng màu). Một chỗ trước đây âm thầm xuống cấp thì nay lên tiếng.
Một tấm nền nổi không thể biết phía sau nó là gì
HUD được vẽ đè lên game — một cánh đồng tuyết, hay một hang động. Nếu tấm nền của nó bán trong suốt,
thứ nằm sau sẽ lộ qua và đổi luôn màu của tấm nền, kéo độ tương phản của chữ tụt theo.
Ở mức đục 82%, chữ mờ nhạt của các theme tối rơi xuống 3.74:1 trên nền sáng — dưới
mức tối thiểu.
Nên các tấm nền bán trong suốt được đo với nền trắng tinh và nền đen tuyền phía sau; đó là những gì tệ nhất mà một cảnh game có thể bày ra. Tấm nền HUD của các theme kèm theo đủ đục để vượt ngưỡng (92%) mà vẫn giữ được vẻ trong như kính.
Cũng vì lý do đó mà màu biểu tượng cũng không cố định. Hình vẽ trong ô nhanh từng bị gán cứng màu
trắng và đo ra 1.11:1 trên một theme sáng — giờ nó đi theo tấm nền mà nó nằm lên, đúng như
các nhãn chữ.
check_contrast.py đọc các file theme;
còn những màu mà một skin trộn ra lúc đang chạy (chip, ô nhanh) thì được đo trong mục
skin contrast của bộ kiểm thử chạy bên trong Godot.