1. Giới thiệu
Lần cập nhật gần đây nhất: ngày 11 tháng 5 năm 2022
Hệ thống màu của Material 3 tạo ra các bảng phối màu dễ tiếp cận bằng thuật toán màu linh động. Vậy khả năng hỗ trợ tiếp cận có ý nghĩa gì đối với màu sắc? Hệ thống màu mới của Material Design tạo ra một bảng phối màu dễ tiếp cận như thế nào và những công cụ nào giúp ích?
Kiến thức bạn sẽ học được
- Mối quan hệ giữa màu sắc với các nguyên tắc về khả năng hỗ trợ tiếp cận và độ tương phản.
- Cách các công cụ có thể giúp tạo bảng phối màu hỗ trợ tiếp cận, chỉnh sửa và kiểm tra độ tương phản.
Điều kiện tiên quyết
Đối với lớp học lập trình này, chúng ta sẽ xây dựng dựa trên một số khái niệm cơ bản về thiết kế.
- Kiến thức về các bảng phối màu và vai trò hiện tại của màu sắc trên Android.
- Có kiến thức về Figma.
Bạn cần có
- Tài khoản Figma
- Tệp Figma Designlab
- Trình bổ trợ Figma Material Theme Builder
2. Bắt đầu
Thiết lập
Để bắt đầu, bạn cần truy cập vào tệp Designlab Figma. Mọi thứ bạn cần cho lớp học này đều có trong tệp Figma đó. Bạn có thể tải tệp này xuống và nhập tệp hoặc sao chép qua cộng đồng Figma.
Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.
Sao chép qua trang Cộng đồng Figma
Chuyển đến tệp Designing with accessible colors (Thiết kế bằng những màu sắc dễ tiếp cận) hoặc tìm kiếm từ khoá "Designing with accessible colors" trong Cộng đồng Figma. Nhấp vào Duplicate (Sao chép) ở góc trên cùng bên phải để sao chép tệp này vào các tệp của bạn.
Bố cục tệp
Khi bạn xem qua tệp này, hãy lưu ý rằng đây là một tệp độc lập, bắt đầu bằng phần giới thiệu. Mỗi phần sẽ được chia thành một hàng gồm các bản vẽ được liên kết với nhau, với một số khái niệm cốt lõi cho phần đó, sau đó là các bài tập. Các phần và bài tập này được xây dựng dựa vào nhau nên cần được hoàn thành tuần tự.
Lớp học lập trình này sẽ hướng dẫn cụ thể hơn cho bạn về những khái niệm và bài tập đó. Hãy đọc cùng với lớp học lập trình để tìm hiểu thêm về các tính năng mới của Material You!
Bắt đầu với bản vẽ Intro (Giới thiệu), trong đây có các nút liên kết các bản vẽ với nhau theo thứ tự. Để truy cập vào đường liên kết, hãy nhấp vào nút này.
Cài đặt trình bổ trợ Figma
Lớp học lập trình này chủ yếu dựa vào một trình bổ trợ mới của Figma để tạo các bảng phối màu và mã thông báo động. Cài đặt trình bổ trợ Figma ngay trên trang cộng đồng Figma hoặc tìm kiếm "Material Theme Builder" trong Cộng đồng Figma.
3. Màu sắc và khả năng hỗ trợ tiếp cận
Hỗ trợ tiếp cận là cách duy nhất để thiết kế cho mọi người, đảm bảo rằng các sản phẩm bạn tạo ra có thể tiếp cận được nhiều đối tượng nhất có thể.
"Tôi có thể nhìn thấy màu sắc trên màn hình không?" chỉ là yếu tố đầu tiên cần xem xét khi thiết kế bằng màu sắc. Mọi người nhìn nhận màu sắc theo nhiều cách tuỳ thuộc vào thị lực của họ.
Mù màu có thể có nghĩa là bạn cần kiểm tra các tổ hợp màu để các phần tử trên giao diện người dùng không bị trộn lẫn với nhau.
Mặc dù độ mờ và trọng số không phải là sắc độ theo nghĩa đen của một màu sắc, nhưng chúng có ảnh hưởng mạnh mẽ đến thị giác về cách cảm nhận màu sắc.
Việc sử dụng độ mờ thấp sẽ tạo ra màu sáng hơn, khiến văn bản không đọc được. Ví dụ: người bị cận thị sẽ gặp khó khăn khi đọc văn bản có độ mờ là 30% ở khoảng cách hợp lý.
Hãy sử dụng độ mờ một cách cẩn thận và không bao giờ sử dụng theo các nguyên tắc được đề xuất.
Độ đậm của phông chữ cũng có thể có tác dụng tương tự, giúp giải thích độ đậm của phông chữ trên nền tối. Khi in, việc sử dụng một phông chữ rất mỏng sẽ khiến mực "tràn" vào đó, tạo ra văn bản chật hẹp. Mắt của chúng ta cũng tạo ra hiệu ứng này trên màn hình, cố gắng lấp đầy không gian.
Kiểu chữ mỏng trên nền tối tạo hiệu ứng ngột ngạt.
Độ dễ đọc và khả năng đọc. Trong suốt lớp học lập trình này, chúng ta sẽ đề cập đến khả năng đọc của văn bản. Tính dễ đọc đo lường mức độ dễ nhìn, trong khi tính dễ hiểu đo lường mức độ dễ hiểu.
4. Độ tương phản màu
Các nguyên tắc hỗ trợ tiếp cận được đưa ra để cung cấp cho nhà thiết kế và nhà phát triển một danh sách kiểm tra nhất quán do chuyên gia đưa ra nhằm đảm bảo chúng tôi đang làm theo các phương pháp hay nhất về việc tạo ra các sản phẩm có tính hoà nhập. WCAG là tiêu chuẩn thông thường và là tiêu chuẩn mà phòng thí nghiệm này tham chiếu.
Độ tương phản màu là sự khác biệt giữa độ chói của các phần tử nền trước và nền sau, được trình bày ở định dạng tỷ lệ. Tiêu chí về tỷ lệ này được chấm điểm. Việc đo lường độ tương phản giữa văn bản trên một nút và vùng chứa của nút đó có thể giúp xác định xem văn bản có dễ đọc hay không.
Ví dụ về độ tương phản màu không đạt yêu cầu.
Nguyên tắc về độ tương phản màu được chia thành văn bản và không phải văn bản, mỗi loại có một bộ điểm riêng.
Văn bản
AA | AAA | |
Văn bản lớn | 3:1 | 4,5:1 |
Văn bản thường (nội dung) | 4,5:1 | 7:1 |
Không phải văn bản
AA | |
Nội dung không phải văn bản (các phần tử đồ hoạ) | 3:1 |
Hãy thử kiểm tra một số độ tương phản và xem cách khắc phục theo cách thủ công.
- Trong Figma, hãy tìm màu sắc trong các thành phần giao diện người dùng. Bắt đầu bằng Văn bản lớn (#C0BEC5), văn bản này nằm trên màu nền (#F5F5FF). Khi sử dụng trình kiểm tra độ tương phản trực tuyến, việc nhập các màu này vào nền trước và nền sau cho thấy màu này không đạt được mọi mức xếp hạng.
- Văn bản quá sáng so với màu nền. Vẫn trên trình kiểm tra độ tương phản trực tuyến, hãy điều chỉnh màu nền trước bằng bộ chọn màu thành màu tối hơn cho đến khi đạt mức AAA.
- Quay lại Figma, hãy áp dụng màu mới đạt yêu cầu cho văn bản lớn.
- Làm theo quy trình tương tự cho nội dung và nút, nhớ kiểm tra cả màu văn bản và màu nền cho từng phần.
- ,Sử dụng kết quả trong phần Đối tượng đồ hoạ và thành phần giao diện người dùng để áp dụng quy trình tương tự cho các biểu tượng**.**
- Đưa màu mới vào Figma cho từng phần tử. Giờ đây, tất cả các phần tử đều sẽ vượt qua các chỉ số tương phản!
Ví dụ về độ tương phản màu đạt yêu cầu.
Có lẽ đó là một quy trình dài và kết quả có thể tạo ra một bảng màu ít hài hoà hơn. Đó là lúc các công cụ có thể giúp ích!
5. Được tạo bằng độ chói
Hệ thống màu động mới cho Material Design được xây dựng bằng độ chói thay vì sắc độ. Điều này có nghĩa là nếu loại bỏ sắc độ và độ bão hoà, chúng ta sẽ có thể thấy độ tương phản thông qua các sắc thái.
Khi một màu được trích xuất, màu đó sẽ tạo ra 5 màu chính đã dịch chuyển để tạo ra các bảng sắc độ. Bảng sắc độ bao gồm 13 sắc độ, trong đó có màu trắng và màu đen. Giá trị tông màu là 100 tương đương với ý tưởng về ánh sáng ở mức tối đa và tạo ra màu trắng. Mọi giá trị sắc độ từ 0 đến 100 đều thể hiện lượng ánh sáng có trong màu sắc.
Hệ thống bảng sắc độ là yếu tố quan trọng để giúp mọi bảng phối màu đều dễ tiếp cận theo mặc định.
Kết hợp màu sắc dựa trên sắc độ thay vì giá trị thập lục phân hoặc sắc thái là một trong những hệ thống chính giúp mọi đầu ra màu sắc đều dễ tiếp cận. Các sản phẩm sử dụng màu động sẽ đáp ứng các yêu cầu vì những tổ hợp thuật toán mà người dùng có thể trải nghiệm được thiết kế để đáp ứng các tiêu chuẩn hỗ trợ tiếp cận.
Các phần tử có độ chói tương tự không có độ tương phản phù hợp để dễ đọc, trong khi các phần tử có giá trị độ chói khác nhau sẽ dễ phân biệt hơn.
Màu động của Material You được thiết kế để hoạt động trong nhiều bối cảnh không thể đoán trước. Để quản lý tỷ lệ tương phản trong nhiều bối cảnh xem, mức độ chói là thuộc tính chính giúp các màu sắc kết hợp thành công ngay cả khi nhóm sản phẩm không kiểm thử từng tổ hợp màu cụ thể.
6. Xây dựng một giao diện có hỗ trợ tiếp cận
Công cụ tạo giao diện tạo ra các mã hiệu Material Design dưới dạng kiểu Figma, cho phép bạn hình dung màu động và tạo giao diện tuỳ chỉnh. Việc này được thực hiện trong khi tuân theo hệ màu Material 3 để đảm bảo các màu hỗ trợ tiếp cận được tạo trong bảng phối màu.
- Trong phần bổ trợ phương thức, hãy nhấp vào Tuỳ chỉnh. Thao tác này sẽ chuyển giao diện sang giao diện tuỳ chỉnh. Giao diện material đã được tạo, nhưng bạn cũng có thể tạo một giao diện mới nếu muốn. Để tìm hiểu thêm, hãy xem phần hình dung màu động.
- Tiếp theo, hãy đặt màu khoá chính. Màu chính có thể là màu cốt lõi của thương hiệu hoặc màu nhấn chính được dùng nhiều nhất. Nhấp vào màu có nhãn Primary (Chính) để mở công cụ chọn màu rồi chọn một màu. Màu chính được dùng cho màu nguồn, tương tự như màu nguồn trong chế độ cài đặt động.
Thêm màu vào MTB.
- Các màu chính còn lại sẽ được điền sẵn dựa trên màu cơ bản. Điều này có nghĩa là bạn không cần thêm màu nếu không cần. Bạn có thể thêm màu phụ và màu thứ ba (không bắt buộc).
- Sơ đồ phối màu cho thấy các màu chính được diễn giải từ màu đầu vào, bảng sắc độ được tạo và bảng phối màu kết quả với các vai trò màu. Có cả bảng phối màu sáng và tối!
- Phòng thí nghiệm đã cung cấp một giao diện người dùng mẫu để xem bảng phối màu được áp dụng. Khi thành phần Giao diện người dùng ứng dụng được chọn, hãy nhấp vào swap (hoán đổi) trong trình bổ trợ.
Bảng phối màu có bản mô phỏng được kết nối.
Đối với những bài tập này, Material Theme Builder đã tạo các mã thông báo cần thiết trong tệp Figma.
7. Kiểm tra độ tương phản bằng Material Theme Builder
Thật tuyệt vời, nhưng chúng tôi hiểu rằng bạn sẽ muốn cập nhật một số kiểu này bằng các màu khác theo cách thủ công. Material Theme Builder có tính năng kiểm tra độ tương phản tích hợp cho các màu trong bảng phối màu cốt lõi để giúp bạn đưa ra những quyết định này.
- Vì mã thông báo được tạo dưới dạng kiểu, nên chúng ta cũng có thể đặt giá trị cho màu được tạo. Trong các kiểu Figma, hãy chuyển xuống Màu chính của giao diện hiện tại rồi chọn biểu tượng Chỉnh sửa kiểu ở bên phải.
- Cập nhật Màu chính trong các thuộc tính. Điều này được thể hiện trong đầu ra màu và giao diện người dùng của ứng dụng. Thuật toán màu không tạo ra màu này, vì vậy chúng tôi không thể đảm bảo khả năng hỗ trợ tiếp cận.
- Trong trình đơn trình bổ trợ, hãy nhấp vào Check Contrast (Kiểm tra độ tương phản), rồi mở lại phương thức Chỉnh sửa kiểu cho thành phần chính. Thao tác này sẽ kiểm tra độ tương phản và cho biết chỉ số tương phản.
Độ tương phản trong hộp thoại kiểu Figma.
8. Xin chúc mừng
Xuất sắc! Khả năng hỗ trợ tiếp cận phải là một phần quan trọng trong quy trình của bạn và với Material Design cũng như Material Theme Builder, việc này thậm chí còn dễ dàng hơn.
Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.
Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign