Tài liệu này giải thích cơ sở lựa chọn màu cho ứng dụng VietTennis: các ứng dụng phổ biến dùng màu thế nào, nguyên tắc chọn màu để không gây mỏi mắt, và 5 bảng màu đề xuất — mỗi bảng trình bày như một bộ hướng dẫn thương hiệu (typography, màu, nút, trạng thái hover…). Chọn một bảng để áp dụng cho toàn bộ prototype. This page explains our color rationale and 5 proposed palettes.
apps 1 · Các ứng dụng phổ biến dùng màu thế nào
Điểm chung: một màu thương hiệu chủ đạo, dùng tiết chế; nền chủ yếu là màu trung tính (trắng / xám rất nhạt / đen); màu nhấn rực rỡ chỉ xuất hiện trên các chi tiết nhỏ (nút, trạng thái active). Đó là cách họ tránh làm "chói mắt" người dùng.
palette 2 · Nguyên tắc chọn màu (không gây chói)
check_circle Nên
- Nền trung tính lớn (off-white) + chữ mực đậm — dễ đọc, ít mỏi mắt.
- Một màu thương hiệu cho cấu trúc/nút; một màu nhấn cho chi tiết nhỏ.
- Chữ mực đậm trên màu nhấn sáng (không chữ sáng trên nền sáng).
- Đảm bảo tương phản đạt WCAG AA (~4.5:1) cho chữ.
cancel Tránh
- Tô màu rực rỡ bão hoà trên cả mảng lớn / nền toàn màn hình.
- Dùng quá 3–4 màu nhấn khác nhau trên một màn hình.
- Chữ sáng trên nền sáng (khó đọc, chói).
- Đổi màu ngữ nghĩa (xanh = thành công, đỏ = lỗi) tuỳ tiện.
format_paint 3 · 5 bảng màu đề xuất của chúng tôi
Mỗi bảng chỉ thay đổi màu thương hiệu (xanh) và màu nhấn; phần trung tính, chữ và màu ngữ nghĩa giữ nguyên nên cả 5 đều dễ đọc như nhau. Bấm Áp dụng để áp cho toàn bộ prototype (lưu lại trên trình duyệt).