23

Tôi đang cố gắng cải thiện một trang web hiện có và đây là những gì tôi đang bắt đầu:

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

Tôi thấy rằng sự kết hợp màu sắc này là khó đọc. Những người khác không đồng ý, nhưng chúng tôi đã đồng ý rằng nó phụ thuộc rất nhiều vào độ tương phản, độ sáng và các thuộc tính hiển thị khác (thậm chí cả góc nhìn):

Tôi đã thử nghiệm khá nhiều với -webkit-text-stroke, text-shadow(xem mã ở trên), nhưng khi tôi cải thiện mọi thứ trên một màn hình, nó sẽ trở nên tồi tệ hơn trên một màn hình khác.

Tôi có thể cố gắng làm gì khác để dễ đọc hơn trên nhiều màn hình khác nhau, trong khi vẫn duy trì bảng màu tổng thể?

color website-design color-theory

— buồn chán
nguồn

22

Hãy hiển thị bình luận này cho khách hàng của bạn. Tôi có nhiều năm kinh nghiệm thiết kế và tôi có thể đảm bảo với bạn rằng "những người khác" trong câu hỏi của bạn ở trên, người cho rằng có thể đọc được, là hoàn toàn sai :) Toàn bộ sơ đồ nên được thay đổi vì nó bị hỏng ngoài sửa chữa.

— mayersdesign

15

Tôi có hơn 30 năm kinh nghiệm làm nhà thiết kế ... Tôi không thể đồng ý nhiều hơn với nhận xét từ @mayersdesign ở trên. phối màu đó nên bị từ chối ngay lập tức.

— Scott

6

Đầu tiên, bạn nên hiểu mục đích của bảng màu của bạn. Trong bảng màu cho UI, nên sử dụng các màu trung tính làm màu chính, bất kỳ màu sắc nổi bật nào cũng nên được ném một cách tiết kiệm . Hãy nghĩ về YouTube chẳng hạn, màu gì hiện lên trong tâm trí? Đỏ và đen, nhưng hãy xem trang web YouTube thực tế, 98% màu trắng và xám nhạt. Màu đỏ chỉ được sử dụng như một điểm nhấn.

— Mã hóa giờ hạnh phúc

Cảm ơn tất cả mọi người (bao gồm cả người trả lời)! Tôi chỉ kiểm tra SE một lần để xem những gì tôi dự kiến là 1 hoặc 2 bình luận kể từ sáng nay, và bây giờ là cái này. Tôi đã học được rất nhiều và nhận được một số lý lẽ thuyết phục - cảm ơn bạn!

— bers

1

1995 gọi là. Họ muốn phối màu của họ trở lại.

— Mazura

53

Thay đổi suy nghĩ của khách hàng.

Không có gì có thể khắc phục được thực tế rằng văn bản màu đỏ trên nền màu xanh là một lựa chọn cực kỳ kém về mức độ dễ đọc vì độ tương phản quá thấp và đặc biệt là màu đỏ và màu xanh lam hoạt động kém như màu tương phản.

Trang web này webaim.org cho thấy độ tương phản giữa hai màu của bạn thật đáng tiếc 1,52: 1

Độ tương phản rất quan trọng đối với mức độ dễ đọc

Tương phản văn bản là một trong những khía cạnh quan trọng hơn của mức độ dễ đọc của văn bản. May mắn thay cho chúng tôi, Nguyên tắc truy cập nội dung web (WCAG) 2.0 giải quyết vấn đề tương phản văn bản một cách cụ thể và cung cấp các hướng dẫn mặc dù nhằm mục đích cung cấp khả năng truy cập web cho người khuyết tật, nói chung cũng đưa ra lời khuyên âm thanh.

WCAG cấp độ AA yêu cầu tỷ lệ tương phản ít nhất 4,5: 1 đối với văn bản thông thường và 3: 1 đối với văn bản lớn và cấp độ AAA yêu cầu tỷ lệ tương phản ít nhất 7: 1 đối với văn bản thông thường và 4,5: 1 đối với văn bản lớn.

Vì vậy, trang web của khách hàng của bạn mâu thuẫn trực tiếp với các hướng dẫn chuyên môn được công bố . Nó cũng mâu thuẫn với gu thẩm mỹ (theo ý kiến chuyên môn của tôi)

Bạn vẫn có thể sử dụng các yếu tố màu đỏ và màu xanh trong thiết kế nếu điều đó là bắt buộc. Nhưng việc đặt văn bản màu đỏ "kích thước nội dung" trên nền màu xanh chỉ đơn giản là sẽ loại bỏ phần lớn khách truy cập vào trang web của bạn. Theo tôi, bạn có trách nhiệm nghề nghiệp để thuyết phục khách hàng của bạn không sử dụng nó.

Hy vọng rằng các liên kết được cung cấp có thể giúp làm cho trường hợp của bạn theo một cách mạnh mẽ hơn là chỉ đơn giản là lập luận rằng bạn cảm thấy khó đọc. Đó là trong thực tế có thể chứng minh khó đọc.

Nhiễm sắc thể

Nếu điều đó không đủ sức thuyết phục, hãy thử điều này - Chromostereopsis là (một cách ngắn gọn!) Một ảo ảnh quang học gây ra các vấn đề về độ sâu trường ảnh cho người xem. Thật khó chịu!

— mayersdesign
nguồn

11

Để làm rõ, các tỷ lệ tương phản trong tài liệu W3C là mức tối thiểu . Đừng nói tỷ lệ này phải nằm trong khoảng 4,5: 1 hoặc 7: 1; họ nói rằng nó nên có ít nhất một trong số đó, tùy thuộc vào mức độ truy cập mà bạn nhắm mục tiêu.

— Adrian McCarthy

1

Điểm rất tốt, tôi đã cập nhật câu trả lời để bao gồm thêm chi tiết, đặc biệt là câu này.

— mayersdesign

8

Mặc dù không có nghĩa là hoàn hảo (hoặc thậm chí tốt), việc thêm một phác thảo màu trắng (hoặc khác) vào văn bản có thể giúp dễ đọc:

Điều này có thể hữu ích nếu khách hàng của bạn khăng khăng giữ màu sắc.

— Gremlin
nguồn

Để công bằng, điều đó chỉ hoạt động với loại 36pt.

— dùng8356

Vâng, khái niệm tuyệt vời. Không có nghĩa là châm biếm. Và bạn càng áp dụng nó, chúng ta càng có thể đọc văn bản tốt hơn. Vì vậy, hãy đưa các đường viền màu trắng ra tận mép màn hình ... Nháy mắt, nháy mắt.

— Martin Zaske

8

Bạn không thể. Những sắc thái của màu đỏ và màu xanh lam đều là những màu tối, bão hòa, chúng thực sự rung động với nhau và văn bản đó sẽ khiến mắt người ta chảy máu. Bất kỳ nhà phát triển hoặc nhà thiết kế nào không quan tâm đến mức độ dễ đọc của văn bản nên được chạy ra khỏi thị trấn trên một đường ray ruby.

Hãy thử làm cho màu đỏ A RẤT nhẹ hơn. Nó sẽ trông màu hồng nhưng nó sẽ dễ đọc hơn. Hoặc sử dụng màu trắng hoặc vàng nhạt trên nền đó. Nền tối nổi tiếng là khó về mức độ dễ đọc. Bạn có thể có cùng màu chung - một màu xanh lục - nhưng làm cho nó nhẹ hơn nhiều. Nhưng văn bản màu đỏ tươi cũng không bao giờ dễ đọc, vì vậy tôi sẽ bỏ qua bảng màu đó cho văn bản.

— người dùng8356
nguồn

6

Nếu bạn đã thử dùng bóng văn bản, tôi nghĩ rằng khả năng duy nhất giữ các màu giống nhau là tạo một khoảng văn bản

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Kiểu dáng

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— Danielillo
nguồn

1

Hoặc thậm chí một màu trắng trơn cứng là tốt hơn

— aloisdg nói Tái lập lại

1

những thứ đó vẫn khó đọc đối với tôi ..

— Happy Hour Coding

@Dylan những gì bạn suy nghĩ về jsfiddle.net/bersbers/xdkj76L3

— BERs

2

Nó có thể đọc được. Tôi không nghĩ đó là một ý tưởng tốt. Nhưng nó có thể được đọc.

— Mã hóa giờ hạnh phúc

blog.theteamw.com/2009/11/09/ từ

— yunzen

6

Như đã được chỉ ra, đó là sự tương phản màu sắc khủng khiếp . Đây cũng là một bảng màu tồi cho những người mù màu (với độ mù màu đỏ-xanh, tỷ lệ tương phản giảm xuống mức gần với tỷ lệ 1: 1, hoàn toàn không thể đọc được).

Đặt cược tốt nhất của bạn ở đây sẽ là để thuyết phục khách hàng rằng họ không nên trộn lẫn văn bản màu và nền. Hoặc tô màu văn bản, hoặc nền, không phải cả hai. Hãy thử tải một mô hình giả vào một công cụ cho phép bạn mô phỏng nhận thức mù màu (bạn có thể tìm thấy một vài tùy chọn hợp lý trực tuyến) và hiển thị kết quả cho khách hàng của mình, điều đó sẽ giúp thuyết phục họ một cách đáng kể.

Nếu đó không phải là một lựa chọn, những thứ khác bạn có thể cố gắng cải thiện khả năng đọc bao gồm (lưu ý rằng không có cách nào trong số này giải quyết vấn đề mù màu, chúng chỉ giúp tương phản hoặc dễ đọc:

Sử dụng một phông chữ đơn cách. Nghe có vẻ ngu ngốc, nhưng điều này thực sự giúp hầu hết mọi người đọc văn bản dễ dàng hơn. Rõ ràng không phải là Courier New, nhưng Bitstream Vera Sans Mono, (hoặc thậm chí là một cái gì đó như Droid Sans Mono) vẫn có vẻ tốt, và sẽ dễ đọc hơn.
Làm cho trọng lượng phông chữ, và có lẽ kích thước một chút quá. Văn bản lớn hơn, táo bạo hơn dễ đọc hơn, không phụ thuộc vào độ tương phản.
Hoán đổi bảng màu (nghĩa là làm cho văn bản màu xanh đậm trên nền đỏ sáng). Nghe có vẻ đơn giản, nhưng nhìn chung hầu hết mọi người đều dễ dàng chuẩn bị màu xanh đậm trên màu đỏ tươi hơn so với cách khác.
Thêm một bóng đổ hẹp có độ tương phản cao vào văn bản với phần bù. Những gì bạn muốn ở đây không phải là một sự pha trộn vào nền, đó là một cạnh cứng cung cấp độ tương phản tốt. Bù đắp bóng cũng có thể giúp với điều này, đặc biệt là bù đường chéo đơn giản. Tôi cũng sẽ đi với màu đen ở đây thay vì màu trắng (bạn muốn làm nổi bật văn bản, không phải nền, vì vậy hãy cho độ tương phản cao so với văn bản). Nhìn chung, một cái gì đó dọc theo dòng text-shadow: 2px 2px 4px black;có lẽ là một khởi đầu tốt.
Làm sáng màu đỏ đáng kể. Ngay bây giờ, bạn đang sử dụng rgb(255,0,0). Trước tiên tôi nên thử một cái gì đó như rgb(255,204,204)(hoặc thậm chí có thể nhẹ hơn) và điều chỉnh từ đó.
Làm tối màu xanh. Một cái gì đó gần hơn rgb(25,51,77)là về cùng một màu sắc, nhưng nên đủ tối để làm cho văn bản dễ đọc hơn.

Thêm một lựa chọn cũng giúp một số vấn đề về mù màu:

Làm bão hòa nền màu xanh. Dù không phải là lựa chọn tốt nhất (nó làm lệch màu sắc đôi chút), điều này sẽ giúp dễ đọc nhất trong số những điều khác tôi đã liệt kê, bởi vì nó sẽ chủ động tăng độ tương phản. Tôi sẽ thử độ bão hòa thấp hơn khoảng 30% (đó rgb(82,102,122)) làm điểm bắt đầu.

— Austin Hemmelgarn
nguồn

5

Bạn cần phải có tỷ lệ tương phản đủ cao giữa nền và văn bản (đối tượng ở nền trước) để có thể đọc được, với tỷ lệ tương phản tối thiểu 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance cho thấy nền và tiền cảnh của bạn quá gần nhau để có thể đọc được.

Đôi khi khách hàng phải nói rằng bảng màu không thể được bảo toàn hoàn toàn và cần được sửa đổi để đáp ứng các yêu cầu về khả năng đọc. Rõ ràng, đảo ngược văn bản thành màu sáng sẽ cho độ tương phản đủ so với nền tối.

— Tối đa Tokman
nguồn

3

"Làm thế nào để bạn làm cho văn bản dễ đọc hơn?" Nói tóm lại, bạn đừng! Sự kết hợp màu sắc không đáp ứng các nguyên tắc truy cập web và không nên được sử dụng. Nên sử dụng màu nền trước hoặc màu nền khác nhau. Bất kể đối tượng mục tiêu giả định của bạn là ai, bạn nên luôn luôn nhắm đến việc phục vụ cho những người khiếm thị, và đây là một sửa chữa dễ dàng.

Tỷ lệ tương phản cho sự kết hợp màu sắc của bạn có thể được nhìn thấy ở đây ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— Andrew
nguồn

2

(Không đủ điểm để bình luận)

Bạn có thể thử thêm một nét vào văn bản. Tôi đang sử dụng thuật ngữ đột quỵ, trong ý nghĩa photoshop, về cơ bản là màu của đường viền / đường viền của văn bản để làm tương phản. Đen / trắng sẽ ổn (đặc biệt nếu bạn chơi với độ dày nét vẽ), nhưng tôi tưởng tượng một số sắc thái nhất định của màu đỏ / xanh cũng có thể hoạt động.

— allthemikeysaretaken
nguồn

Làm thế nào để tôi làm cho sự kết hợp màu sắc này dễ đọc hơn?

Thay đổi suy nghĩ của khách hàng.