Màu sắc thương hiệu của bạn có tác động mạnh mẽ đến cảm xúc, nhưng chúng xuất hiện như thế nào đối với những khách truy cập trang web bị khiếm thị, mù màu hoặc phải đối mặt với các yếu tố môi trường khiến khó nhìn thấy?
Mức độ màu sắc và độ tương phản rất quan trọng trong giao tiếp và việc có được những chi tiết này vừa phải là rất quan trọng đối với nhà thiết kế quan tâm đến khả năng tiếp cận.'
Rối loạn nhận thức màu sắc phổ biến hơn bạn nghĩ. Vì vậy, trong bài đăng này, chúng ta sẽ nói về cách những người khuyết tật như thị lực kém, chứng khó đọc và mù màu tương tác với web.
Mục lục
Làm cách nào để sử dụng trình kiểm tra màu để cải thiện khả năng truy cập trang web của tôi?
Phần này thực sự khá đơn giản, mặc dù nó đòi hỏi một chút nỗ lực. Bạn sẽ cần sử dụng công cụ Kiểm tra độ tương phản trực tuyến của WebAIM. WebAIM là một tổ chức phi lợi nhuận có trụ sở tại Đại học Bang Utah với sứ mệnh nâng cao khả năng truy cập web trên toàn thế giới.
Chỉ cần nhập màu nền trước của bạn (ví dụ: màu của văn bản hoặc biểu tượng) và màu nền dưới dạng giá trị thập lục phân (còn được gọi là giá trị hex), như được chỉ định trong HTML hoặc CSS và trình kiểm tra tỷ lệ tương phản sẽ thông báo cho bạn biết tỷ lệ này có đủ hay không. Hãy nhớ rằng tỷ lệ tương phản tối thiểu bạn nên tìm kiếm là 4.5 trên 1. Văn bản màu đen trên nền trắng có tỷ lệ tương phản từ 21 đến 1, do đó bạn có rất nhiều thời gian.
5 công cụ tạo bảng màu web mà mọi người đều có thể thấy
1. Trình kiểm tra độ tương phản màu WebAIM
Nhập màu hex cho nền trước và nền sau. Đầu ra hiển thị sự tuân thủ AA và AAA đối với văn bản thông thường và lớn, cùng với một câu mẫu. Thanh trượt cho phép bạn thay đổi mọi thứ cho đến khi bạn tìm thấy sự kết hợp tốt.
Điểm mạnh
- Công cụ đơn giản với giao diện dễ nhìn.
- Đây là một công cụ đơn giản, hay dành cho người mới bắt đầu và không chỉ các nhà thiết kế.
Điểm yếu
- Không thể so sánh nhiều hơn hai màu, chỉ có hai.
- Thanh trượt độ sáng không phải là cách hay để chọn màu. Thật khó để nói màu sắc hấp dẫn như thế nào trong màn hình đơn giản này.
2. Trình kiểm tra độ tương phản cho WCAG
Nhập màu hex cho nền trước và nền sau. Hiển thị sự tuân thủ AA và AAA đối với văn bản thông thường và lớn bên cạnh mẫu văn bản Lorem Ipsum. Bạn cũng có thể tải lên một hình ảnh. Bảng màu 9 màu được chọn tự động cho bạn. Sau đó, bạn có thể so sánh từng màu làm màu Foreground hoặc Background.
Điểm mạnh
- Công cụ đơn giản với giao diện thân thiện với người dùng.
- Có khả năng tạo bảng màu từ hình ảnh.
Điểm yếu
- Bảng màu được chọn tự động và bạn có thể thay đổi thêm bằng bộ chọn màu, nhưng những thay đổi đó sẽ không được lưu lại vào bảng màu. Người ta phải sao chép và dán thông tin vào một tài liệu mới.
3. Khối màu
Nhập màu cho bảng màu, mỗi màu trên một dòng riêng. Đầu ra hiển thị các chữ cái mẫu với tỷ lệ tương phản so với tiêu chuẩn AA cho phông chữ nhỏ và lớn. Ba cột hiển thị độ tương phản với nền trắng, nền đen và tập hợp các màu thương hiệu “Dễ đọc nhất hiện có”.
Điểm mạnh
- Dễ nhìn Giao diện người dùng (UI) được tổ chức tốt và dễ dàng nhìn thấy trạng thái đạt/không đạt/cạnh.
Điểm yếu
- Không đáp ứng được tiêu chuẩn do AAA đặt ra.
- Không thực hiện mọi sự kết hợp màu sắc có thể và lúc đầu không rõ trường hợp này là gì.
4.) Lưới tương phản tám hình dạng
Nhập màu bảng màu. Ngoài ra, bạn có thể đặt tên cho mỗi màu. Ứng dụng này tạo ra một bảng với mọi sự kết hợp màu sắc có thể có. Có ba kích cỡ của gạch. Có các tín hiệu trực quan về mức đạt/không đạt/cạnh AA và AAA cũng như tỷ lệ tương phản hiệu quả. Các cột và hàng có thể được di chuyển xung quanh trong ứng dụng bằng cách kéo và thả. Dữ liệu dạng bảng có thể được lưu, xuất và chia sẻ.
Điểm mạnh
- Có rất nhiều tính năng hữu ích giúp phân tích toàn bộ bảng màu.
Điểm yếu
- Nó khó học hơn các công cụ khác dễ sử dụng hơn.
- Không phải là cách đúng đắn để chỉ so sánh hai màu.
- Không tốt cho việc tìm ra cách phối hợp các màu sắc với nhau.
- Nhìn vào có vẻ choáng ngợp nhưng có rất nhiều thông tin được hiển thị.
5. Màu sắc an toàn
Nhập màu nền. Chọn họ, kích thước và trọng lượng của phông chữ. Chọn AA hoặc AAA làm tiêu chuẩn. Hiển thị màu đã chọn và mã hex của nó, cũng như mẫu và tỷ lệ tương phản hiệu quả. Hình thu nhỏ lớn của các màu nền trước có thể có đủ độ tương phản là phần hay nhất. Bạn có thể chọn xem tất cả chúng hoặc chỉ một số nhóm màu nhất định (xanh lá cây, xanh lam, tím, v.v.)
Điểm mạnh
- Với giao diện dễ nhìn, bạn có thể dễ dàng tìm thấy sự kết hợp màu sắc đẹp mắt và hoạt động tốt.
- Đây là một công cụ hữu ích nếu bạn chưa có bảng màu thương hiệu hoặc nếu bạn muốn thêm vào bảng màu mà bạn đã có cho web.
Điểm yếu
- Bạn chỉ có thể so sánh màu nền trước và màu nền tại một thời điểm.
- Bạn phải sao chép và dán màu vào một tài liệu riêng nếu muốn lưu chúng.
- Hãy ra ngoài và làm mọi thứ cho mọi người!
Khi bạn biết cách sử dụng những công cụ này, bạn có thể thấy rằng mình cần nhiều hơn một công cụ cho một dự án. Có lẽ Color Cube là cách tốt nhất để cho khách hàng thấy những gì bạn đã học được về khả năng tiếp cận. Có thể bạn sẽ thường xuyên sử dụng công cụ của WebAIM để thực hiện kiểm tra nhanh tại chỗ.
Kết luận
Bằng cách sử dụng các mẹo, nguyên tắc và công cụ mà chúng tôi vừa nói đến, bạn có thể tạo nhãn và màu sắc có độ tương phản cao cho trang web của mình. Điều này sẽ giúp những người có thị lực kém, chứng khó đọc và mù màu dễ dàng đọc trang web và nội dung của bạn hơn. Đừng ngạc nhiên nếu khán giả nói chung cũng thấy việc sử dụng trang web của bạn dễ dàng hơn.
