24

ฉันกำลังพยายามปรับปรุงเว็บไซต์ที่มีอยู่และนี่คือสิ่งที่ฉันเริ่มต้นด้วย:

<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>

ฉันพบว่าการผสมสีนี้อ่านยาก คนอื่นไม่เห็นด้วย แต่เราได้ตกลงกันแล้วว่ามันขึ้นอยู่กับความคมชัดความสว่างและคุณสมบัติการแสดงผลอื่น ๆ มากมาย (แม้แต่มุมมอง):

ผมได้ทดลองแล้วไม่น้อยที่มี-webkit-text-stroke, text-shadow(ดูรหัสข้างต้น) แต่ที่ผมปรับปรุงสิ่งหนึ่งที่แสดงว่ามันเลวร้ายลงอีก

ฉันจะทำอะไรได้อีกบ้างเพื่อให้สามารถอ่านสิ่งนี้ได้มากขึ้นบนหน้าจอที่หลากหลายในขณะที่ยังคงรักษาโทนสีโดยรวมเอาไว้?

color website-design color-theory

— Bers
แหล่งที่มา

22

อย่าลังเลที่จะแสดงความคิดเห็นนี้กับลูกค้าของคุณ ฉันมีประสบการณ์ด้านการออกแบบมาหลายปีและฉันสามารถรับรองได้ว่า "คนอื่น ๆ " ในคำถามของคุณด้านบนที่คิดว่าสามารถอ่านได้ผิดทั้งหมด :) โครงร่างทั้งหมดควรจะเปลี่ยนเพราะมันเสียเกินกว่าจะซ่อมได้

— mayersdesign

15

ฉันมีประสบการณ์มากกว่า 30 ปีในฐานะนักออกแบบ ... ฉันอาจไม่เห็นด้วยกับความคิดเห็นจาก @mayersdesign ด้านบน ชุดสีนั้นควรถูกปฏิเสธทันที

— Scott

6

ก่อนอื่นคุณควรเข้าใจวัตถุประสงค์ของชุดสีของคุณ ในชุดรูปแบบสีสำหรับ UI มันเหมาะสมที่จะใช้สีที่เป็นกลางเป็นสีหลักสีที่เน้นใด ๆ ควรถูกโยนอย่างไม่จำกัด คิดเกี่ยวกับ YouTube เช่นสีอะไรในใจ? สีแดงและดำ แต่ลองดูที่หน้าเว็บจริงของ YouTube ซึ่งมีสีขาวและสีเทาอ่อน 98% ใช้สีแดงเป็นเพียงการเน้น

— Happy Hour Coding

ขอบคุณทุกคน (รวมถึงผู้ตอบด้วย)! ฉันเพิ่งตรวจสอบ SE เพื่อดูสิ่งที่ฉันคาดหวังว่าจะเป็น 1 หรือ 2 ความคิดเห็นตั้งแต่เช้านี้และตอนนี้ ฉันเรียนรู้มากและได้รับข้อโต้แย้งที่น่าเชื่อ - ขอบคุณ!

— bers

1

2538 พวกเขาต้องการโทนสีของพวกเขากลับมา

— Mazura

54

เปลี่ยนความคิดของลูกค้า

ไม่มีสิ่งใดที่สามารถแก้ไขความจริงที่ว่าข้อความสีแดงบนพื้นหลังสีน้ำเงินเป็นตัวเลือกที่แย่มากสำหรับความชัดเจนเนื่องจากความคมชัดต่ำเกินไปและเนื่องจากสีแดงและสีน้ำเงินโดยเฉพาะนั้นทำงานได้ไม่ดีเท่าสีที่ตัดกัน

เว็บไซต์นี้webaim.orgแสดงให้เห็นว่าความแตกต่างระหว่างสองสีของคุณนั้นน่าสงสาร 1.52: 1

ความคมชัดเป็นสิ่งสำคัญสำหรับความชัดเจน

ความเปรียบต่างของข้อความเป็นส่วนสำคัญอย่างหนึ่งของการอ่านข้อความ โชคดีสำหรับเราที่Web Content Accessibility Guidelines (WCAG) 2.0 เน้นความแตกต่างของข้อความโดยเฉพาะและให้แนวทางที่แม้จะมีจุดประสงค์เพื่อให้ผู้พิการเข้าถึงเว็บได้ แต่ก็ให้คำแนะนำที่ดี

WCAG ระดับ AA ต้องการอัตราส่วนความคมชัดอย่างน้อย 4.5: 1 สำหรับข้อความปกติและ 3: 1 สำหรับข้อความขนาดใหญ่และระดับ AAA ต้องการอัตราส่วนความคมชัดอย่างน้อย 7: 1 สำหรับข้อความปกติและ 4.5: 1 สำหรับข้อความขนาดใหญ่

ดังนั้นเว็บไซต์ของลูกค้าที่อยู่ในความขัดแย้งโดยตรงของแนวทางการตีพิมพ์ระดับมืออาชีพ มันยังขัดแย้งกับรสนิยมทางสุนทรียะ (ในความเห็นของฉัน)

คุณยังคงสามารถใช้องค์ประกอบของสีแดงและสีน้ำเงินในการออกแบบหากจำเป็น แต่การวางข้อความสีแดง "ขนาดเนื้อหา" ไว้บนพื้นหลังสีน้ำเงินก็เป็นการทำให้ผู้เยี่ยมชมไซต์ของคุณมีเปอร์เซ็นต์ ในความคิดของฉันคุณมีความรับผิดชอบอย่างมืออาชีพในการโน้มน้าวใจลูกค้าของคุณไม่ให้ใช้มัน

หวังว่าลิงก์ที่ให้ไว้อาจช่วยทำให้กรณีของคุณมีประสิทธิภาพมากขึ้นกว่าเพียงแค่เถียงว่าคุณอ่านยาก ในความเป็นจริงมันยากที่จะพิสูจน์อ่าน

Chromostereopsis

หากนั่นไม่ใช่การโน้มน้าวใจให้ลองทำสิ่งนี้ - Chromostereopsisคือ (สั้น ๆ !) ภาพลวงตาที่ทำให้เกิดปัญหาเชิงลึกสำหรับผู้ชม มันไม่เป็นที่พอใจ!

— mayersdesign
แหล่งที่มา

11

ชี้แจงที่อัตราส่วนความคมชัดในเอกสารของ W3C ที่มีต่ำสุด อัตราส่วนอย่าบอกว่าควรอยู่ระหว่าง 4.5: 1 หรือ 7: 1; พวกเขาบอกว่าควรมีอย่างน้อยหนึ่งรายการขึ้นอยู่กับระดับการเข้าถึงที่คุณกำหนดเป้าหมาย

— Adrian McCarthy

1

จุดที่ดีมากฉันได้อัปเดตคำตอบเพื่อรวมรายละเอียดเพิ่มเติมโดยเฉพาะอย่างยิ่งอันนี้

— mayersdesign

8

แม้ว่าจะไม่สมบูรณ์แบบ (หรือแม้แต่ดี) การเพิ่มโครงร่างสีขาว (หรืออื่น ๆ ) ลงในข้อความสามารถช่วยในการอ่าน:

สิ่งนี้อาจมีประโยชน์หากลูกค้าของคุณยืนยันในการรักษาสี

— ปู่โสม
แหล่งที่มา

เพื่อความเป็นธรรมใช้งานได้กับ 36pt type เท่านั้น

— user8356

ใช่แนวคิดที่ยอดเยี่ยม ไม่ได้หมายถึงการเสียดสี ยิ่งคุณสมัครมากเท่าไหร่เราก็ยิ่งอ่านข้อความได้ดีขึ้นเท่านั้น ดังนั้นนำเส้นขอบสีขาวไปจนถึงขอบของหน้าจอ ...

— Martin Zaske

8

คุณทำไม่ได้ เฉดสีแดงและน้ำเงินนั้นมีทั้งสีเข้มสีอิ่มตัวพวกมันสั่นสะเทือนกันและข้อความนั้นจะทำให้ดวงตาของผู้คนตกเลือด นักพัฒนาซอฟต์แวร์หรือนักออกแบบที่ไม่สนใจข้อความที่ชัดเจนควรวิ่งออกนอกเมืองบนรางทับทิม

ลองทำให้สีแดงเบากว่ามาก มันจะดูเป็นสีชมพู แต่จะอ่านได้มากกว่า หรือใช้สีขาวหรือสีเหลืองอ่อนบนพื้นหลังนั้น พื้นหลังสีเข้มนั้นยากในการอ่าน คุณสามารถมีสีทั่วไปเหมือนกัน - สีน้ำเงินแกมเขียว - แต่ทำให้มันจางลงมาก แต่ตัวหนังสือสีแดงสดนั้นไม่เคยอ่านง่ายเลยดังนั้นฉันก็เลยอยากให้โครงร่างสีนั้นเป็นข้อความ

— user8356
แหล่งที่มา

7

ดังที่ได้กล่าวไว้แล้วนั่นคือความคมชัดของสีที่น่ากลัว นอกจากนี้ยังเป็นจานสีที่ไม่ดีสำหรับคนตาบอดสี (ที่มีตาบอดสีแดงน้ำเงินอัตราความคมชัดลดลงถึงสิ่งที่น่ากลัวใกล้เคียงกับ 1: 1 ซึ่งไม่สามารถอ่านได้อย่างสมบูรณ์)

ทางออกที่ดีที่สุดของคุณที่นี่จะเป็นการโน้มน้าวใจลูกค้าว่าพวกเขาไม่ควรผสมข้อความและพื้นหลังเป็นสี ทั้งสีข้อความหรือพื้นหลังไม่ใช่ทั้งสองอย่าง ลองโหลดการจำลองเป็นเครื่องมือที่ช่วยให้คุณจำลองการรับรู้ของตาบอดสี (คุณสามารถหาตัวเลือกที่เหมาะสมสองทางออนไลน์) และแสดงผลลัพธ์ให้กับลูกค้าของคุณซึ่งจะช่วยให้เชื่อมั่นได้

หากนั่นไม่ใช่ตัวเลือกสิ่งอื่น ๆ ที่คุณสามารถลองปรับปรุง ได้แก่ ความสามารถในการอ่านได้ (โปรดทราบว่าสิ่งเหล่านี้ไม่สามารถแก้ไขปัญหาความตาบอดสีได้พวกเขาช่วยแก้ไขความเปรียบต่างหรือความสามารถในการอ่านทั่วไปเท่านั้น:

ใช้แบบอักษรที่เว้นระยะเดียว ฟังดูงี่เง่า แต่สิ่งนี้ช่วยให้คนส่วนใหญ่อ่านข้อความได้ง่ายขึ้น เห็นได้ชัดว่าไม่ใช่ Courier ใหม่ แต่ Bitstream Vera Sans Mono (หรือแม้แต่บางอย่างเช่น Droid Sans Mono) ยังคงดูดีอยู่และจะอ่านได้ค่อนข้างดีกว่า
ทำให้น้ำหนักตัวอักษรและขนาดอาจจะเกินไป ข้อความที่ใหญ่ขึ้นและโดดเด่นยิ่งขึ้นนั้นอ่านง่ายขึ้นโดยไม่ขึ้นกับความคมชัด
สลับชุดสี (นั่นคือทำให้ข้อความสีน้ำเงินเข้มบนพื้นหลังสีแดงสด) ฟังดูง่าย แต่โดยทั่วไปแล้วคนส่วนใหญ่ก็สามารถเตรียมสีน้ำเงินเข้มไว้ในสีแดงสดได้ดีกว่าวิธีอื่น ๆ
เพิ่มเงาที่แคบคอนทราสต์สูงให้กับข้อความด้วยออฟเซ็ต สิ่งที่คุณต้องการที่นี่ไม่ใช่การผสมผสานกันในพื้นหลัง แต่เป็นขอบแข็งที่ให้ความเปรียบต่างที่ดี การชดเชยเงานี้สามารถช่วยได้เช่นกันโดยเฉพาะการชดเชยแนวทแยงแบบง่าย ฉันจะไปที่นี่ด้วยสีดำแทนที่จะเป็นสีขาว (คุณต้องการเน้นข้อความไม่ใช่พื้นหลังดังนั้นเพื่อให้ได้ความเปรียบต่างสูงกับข้อความ) โดยรวมแล้วสิ่งที่อยู่ในแนวของtext-shadow: 2px 2px 4px black;น่าจะเป็นจุดเริ่มต้นที่ดี
แบ่งเบาสีแดงอย่างมีนัยสำคัญ rgb(255,0,0)ตอนนี้คุณกำลังใช้ ฉันจะลองกับสิ่งที่ชอบrgb(255,204,204)(หรืออาจจะเบากว่า) ก่อนและปรับจากที่นั่น
สีน้ำเงินเข้ม บางสิ่งที่ใกล้เคียงrgb(25,51,77)กับสีเดียวกัน แต่ควรมืดพอที่จะทำให้ข้อความอ่านง่ายขึ้น

อีกหนึ่งตัวเลือกที่ช่วยแก้ปัญหาเรื่องความตาบอดสี:

ตัดทอนพื้นหลังสีน้ำเงิน ในขณะที่ไม่ใช่ตัวเลือกที่ดีที่สุด (มันเอียงโทนสีไปบ้าง) สิ่งนี้จะช่วยให้การอ่านมากที่สุดจากสิ่งอื่น ๆ ที่ฉันได้ระบุไว้เพราะมันจะเพิ่มความคมชัดอย่างแข็งขัน ฉันจะลองลดความอิ่มตัวของสีประมาณ 30% (นั่นคือrgb(82,102,122)) เป็นจุดเริ่มต้น

— ออสตินเฮมเมลการ์น
แหล่งที่มา

6

หากคุณลองเงาข้อความมาแล้วฉันคิดว่าความเป็นไปได้เพียงอย่างเดียวที่ทำให้สีเดียวกันนั้นขยายเป็นข้อความ

<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>

รูปแบบ

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
แหล่งที่มา

1

หรือแม้แต่สีขาวธรรมดาที่แข็งดีกว่า

— aloisdg พูดว่า Reinstate Monica

1

มันยังอ่านยากสำหรับฉัน ..

— Happy Hour Coding

@Dylan คุณคิดอย่างไรเกี่ยวกับjsfiddle.net/bersbers/xdkj76L3

— bers

2

มันสามารถอ่านได้ ฉันไม่คิดว่ามันเป็นความคิดที่ดี แต่มันสามารถอ่านได้

— Happy Hour Coding

blog.theteamw.com/2009/11/09/…

— yunzen

5

คุณต้องมีอัตราส่วนความคมชัดสูงพอระหว่างพื้นหลังและข้อความ (วัตถุที่อยู่ด้านหน้า) เพื่อให้สามารถอ่านได้โดยมีอัตราส่วนความคมชัดน้อยที่สุดที่ 4.5: 1 https://www.oss-usa.com/color-check-ada-image-complianceแสดงให้เห็นว่าพื้นหลังและพื้นหน้าของคุณอยู่ใกล้กันเกินกว่าที่จะอ่านได้

บางครั้งลูกค้าต้องได้รับแจ้งว่าไม่สามารถเก็บรักษาชุดสีได้อย่างสมบูรณ์และต้องได้รับการแก้ไขเพื่อให้เป็นไปตามข้อกำหนดการอ่านได้ เห็นได้ชัดว่าการกลับข้อความเป็นสีอ่อนจะให้ความคมชัดเพียงพอกับพื้นหลังสีเข้ม

— Max Tokman
แหล่งที่มา

3

"คุณทำให้ข้อความอ่านง่ายขึ้นได้อย่างไร" ในระยะสั้นคุณทำไม่ได้! การผสมสีไม่เป็นไปตามหลักเกณฑ์การเข้าถึงเว็บและไม่ควรใช้ ควรใช้สีพื้นหน้าหรือพื้นหลังอื่น ไม่ว่าผู้ชมเป้าหมายของคุณคือใครคุณควรตั้งเป้าหมายที่จะให้ความช่วยเหลือผู้ที่มีปัญหาด้านการมองเห็น

อัตราส่วนความคมชัดสำหรับการผสมสีของคุณสามารถดูได้ที่นี่ ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— แอนดรู
แหล่งที่มา

2

(คะแนนไม่เพียงพอที่จะแสดงความคิดเห็น)

คุณสามารถลองเพิ่มการลากไปที่ข้อความ ฉันใช้คำว่า "จังหวะ" ในความรู้สึกของ photoshop โดยทั่วไปแล้วสีของเส้นขอบ / โครงร่างของข้อความเพื่อใช้เป็นความคมชัด สีดำ / ขาวควรจะดี (โดยเฉพาะถ้าคุณเล่นกับความหนาของจังหวะ) แต่ฉันคิดว่าเฉดสีแดง / น้ำเงินบางอันอาจใช้ได้เช่นกัน

— allthemikeysaretaken
แหล่งที่มา

ฉันจะทำให้การผสมสีนี้อ่านง่ายขึ้นได้อย่างไร

เปลี่ยนความคิดของลูกค้า