1. Giới thiệu
Cập nhật lần gần đây nhất: 11/05/2022
Hệ màu 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 động, nhưng khả năng hỗ trợ tiếp cận có ý nghĩa gì đối với màu sắc? Hệ màu mới của Material Design tạo ra 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 khả năng hỗ trợ tiếp cận và nguyên tắc về độ tương phản.
- Cách công cụ có thể giúp tạo bảng phối màu dễ 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ế.
- Có kiến thức về các vai trò và bảng phối màu hiện tại của 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 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 vào tệp của bạn.
Bố cục tệp
Khi xem qua tệp, hãy lưu ý rằng đây là một tệp độc lập, và 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.
Cài đặt trình bổ trợ Figma
Lớp học lập trình này dựa nhiều vào một trình bổ trợ Figma mới để tạo mã thông báo và bảng phối màu động. Cài đặt trình bổ trợ Figma trực tiếp từ 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
Khả năng 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 với nhiều đối tượng nhất có thể.
"Tôi có thể nhìn thấy màu trên màn hình không?" chỉ là yếu tố đầu tiên cần cân nhắc khi thiết kế bằng màu sắc. Mọi người nhìn thấy màu sắc theo nhiều cách tuỳ thuộc vào thị lực của họ.
Chứng mù màu có thể có nghĩa là 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à độ đậm không phải là màu sắc thực tế, nhưng chúng có hiệu ứng hình ảnh mạnh mẽ đối với 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, có thể khiến văn bản không đọc được. Ví dụ: đối với người bị cận thị, sẽ gặp khó khăn khi đọc văn bản được đặt ở độ mờ 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ờ được vi phạm các nguyên tắc đề xuất.
Độ đậm của phông chữ có thể có hiệu ứng tương tự, tính đến độ đậm của phông chữ mỏng hơn trên nền tối hơn. Trong bản in, việc sử dụng phông chữ rất mỏng sẽ cho phép mực "tràn" vào đó, tạo ra văn bản gây cảm giác ngột ngạt. 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 khoảng trống.
Kiểu chữ mỏng trên nền tối tạo ra hiệu ứng ngột ngạt.
Tính dễ đọc so với Tính dễ hiểu. Trong suốt lớp học lập trình này, chúng ta sẽ đề cập đến tính dễ đọc của văn bản. Tính dễ đọc đo lường mức độ dễ nhìn thấy, trong khi tính dễ hiểu đo lường mức độ dễ hiểu.
4. Độ tương phản màu
Nguyên tắc về khả năng hỗ trợ tiếp cận tồn tại để 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 hướng dẫn nhằm đảm bảo chúng ta đang tuân theo các phương pháp hay nhất về việc tạo ra các sản phẩm có thể tiếp cận được. WCAG là tiêu chuẩn thông thường và là tiêu chuẩn mà lớp học lập trình 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í tỷ lệ này được phân loại. Việc đo lường độ tương phản giữa văn bản trên 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ộ cấp độ 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 | |
Không phải văn bản (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 trong các phần tử trên giao diện người dùng. Bắt đầu với 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 công cụ 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 công cụ này không đạt tất cả các mức xếp hạng.
- Văn bản quá sáng so với màu nền. Vẫn trên công cụ 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 công cụ chọn màu thành màu tối hơn cho đến khi đạt 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, đảm bảo bạn kiểm tra cả màu văn bản và màu nền cho từng nội dung.
- ,Sử dụng kết quả trong phần Graphical Objects and User Interface Components (Đố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ử. Tất cả các phần tử hiện phải đạt mức xếp hạng độ tương phản!
Ví dụ về độ tương phản màu đạt yêu cầu.
Có lẽ bạn cảm thấy đây 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. Đây là lúc công cụ có thể giúp ích!
5. Được xây dựng bằng độ chói
Hệ màu động mới cho Material Design được xây dựng bằng độ chói thay vì màu sắc. Điều này có nghĩa là nếu màu sắc và độ bão hoà bị loại bỏ, 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, kết quả là 5 màu chính đã dịch chuyển mà từ đó các bảng sắc độ được tạo ra. Bảng sắc độ bao gồm 13 sắc độ, bao gồm cả màu trắng và màu đen. Giá trị sắc độ 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.
Hệ thống bảng sắc độ là trung tâm để tạo ra bất kỳ bảng phối màu nào có thể tiếp cận được theo mặc định.
Việc kết hợp màu dựa trên sắc độ, thay vì giá trị thập lục phân hoặc màu sắc, là một trong những hệ thống chính giúp mọi đầu ra màu đều có thể tiếp cận được. Các sản phẩm sử dụng màu động sẽ đáp ứng các yêu cầu vì các 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 về khả năng 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 dễ phân biệt hơn.
Màu động của Material You được xây dựng để hoạt động trong các 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 cho phép các màu kết hợp thành công ngay cả khi nhóm sản phẩm không kiểm tra từng tổ hợp màu cụ thể.
6. Xây dựng giao diện dễ tiếp cận
Trình tạo giao diện tạo mã thông báo Material Design dưới dạng kiểu Figma, cho phép bạn hình dung màu động và xây dựng giao diện tuỳ chỉnh. Thao tá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 dễ tiếp cận được tạo trong bảng phối màu.
- Trong phương thức trình bổ trợ, 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-theme đã được tạo, nhưng bạn cũng có thể tạo 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 chính. Màu chính có thể là màu chính của thương hiệu hoặc màu nhấn chính được sử 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 và chọn màu. Màu chính được dùng cho màu nguồn, giống 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 dựa trên màu chính. Điều này có nghĩa là bạn không cần thêm màu bổ sung nếu không cần. Bạn có thể thêm màu phụ và màu thứ ba.
- 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ả có vai trò của màu. Có cả bảng phối màu sáng và tối!
- Lớp học lập trình đã cung cấp một ví dụ về giao diện người dùng để 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 các bài tập này, Material Theme Builder đã tạo các mã thông báo bắt buộc trong tệp Figma.
7. Kiểm tra độ tương phản bằng Material Theme Builder
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 bao gồm tính năng kiểm tra độ tương phản tích hợp cho các màu của 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ị của màu được tạo. Trong kiểu Figma, hãy chuyển xuống màu chính của giao diện hiện tại và 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. Thông tin này được phản ánh trong đầu ra màu và Giao diện người dùng ứng dụng. Thuật toán màu không tạo ra màu này, vì vậy, chúng ta 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) và sau đó mở lại phương thức Chỉnh sửa kiểu cho màu chính. Thao tác này sẽ kiểm tra độ tương phản và hiển thị mức xếp hạng độ 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 và 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