24

Próbuję ulepszyć istniejącą stronę internetową i od tego zaczynam:

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

Uważam, że ta kombinacja kolorów jest trudna do odczytania. Inni się nie zgadzają, ale zgodziliśmy się, że wiele zależy od kontrastu, jasności i innych właściwości wyświetlacza (nawet kąta widzenia):

Mam już sporo eksperymentował z -webkit-text-stroke, text-shadow(patrz kod powyżej), ale jak mogę poprawić rzeczy na jednym ekranie, robi się gorzej na innym.

Co jeszcze mogę spróbować uczynić to bardziej czytelnym na różnych wyświetlaczach, zachowując ogólny schemat kolorów?

color website-design color-theory bers
źródło

22

Zapraszam do przedstawienia tego komentarza klientowi. Mam wieloletnie doświadczenie w projektowaniu i mogę was zapewnić, że „inni” w powyższym pytaniu, którzy uważają, że jest to czytelne, są całkowicie w błędzie :) Cały schemat należy zmienić, ponieważ jest zepsuty nie do naprawienia.

mayersdesign

15

Mam ponad 30-letnie doświadczenie jako projektant ... Nie mogłem więcej zgodzić się z komentarzem z @mayersdesign powyżej. ten schemat kolorów należy natychmiast odrzucić.

Scott

6

Po pierwsze, powinieneś zrozumieć cel swojej kolorystyki. W schemacie kolorów dla interfejsu użytkownika sensowne jest używanie kolorów neutralnych jako kolorów podstawowych, wszelkie kolory akcentujące należy rzucać oszczędnie . Pomyśl na przykład o YouTube, jaki kolor przychodzi ci na myśl? Czerwony i czarny, ale spójrz na prawdziwą stronę YouTube, jej 98% biały i jasnoszary. Kolor czerwony służy jedynie jako akcent.

Kodowanie Happy Hour

Dziękujemy wszystkim (w tym osobom udzielającym odpowiedzi)! Właśnie dwukrotnie sprawdziłem SE, aby zobaczyć, co oczekiwałem od 1 lub 2 komentarzy od dzisiejszego ranka, a teraz to. Dużo się nauczyłem i otrzymałem przekonujące argumenty - dziękuję!

bers

1

1995 r. Chcą odzyskać kolorystykę.

Mazura

54

Zmień zdanie klienta.

Nic nie może naprawić faktu, że czerwony tekst na niebieskim tle jest wyjątkowo złym wyborem dla czytelności, ponieważ kontrast jest zbyt niski, a zwłaszcza, że czerwony i niebieski działają słabo jako kontrastujące kolory.

Ta strona webaim.org pokazuje, że kontrast między twoimi dwoma kolorami jest żałosny 1,52: 1

Kontrast jest ważny dla czytelności

Kontrast tekstu jest jednym z ważniejszych aspektów czytelności tekstu. Na szczęście dla nas Wytyczne dotyczące dostępności treści internetowych (WCAG) 2.0 odnoszą się w szczególności do kontrastu tekstu i zawierają wytyczne, które - choć mają na celu zapewnienie dostępu do sieci osobom niepełnosprawnym - ogólnie oferują solidne porady.

WCAG poziom AA wymaga współczynnika kontrastu co najmniej 4,5: 1 dla normalnego tekstu i 3: 1 dla dużego tekstu, a poziom AAA wymaga współczynnika kontrastu co najmniej 7: 1 dla normalnego tekstu i 4,5: 1 dla dużego tekstu.

Tak więc witryna twoich klientów stoi w sprzeczności z opublikowanymi profesjonalnymi wytycznymi . Jest to również sprzeczne ze smakiem estetycznym (moim profesjonalnym zdaniem)

Nadal możesz używać elementów czerwonego i niebieskiego w projekcie, jeśli jest to wymagane. Ale nałożenie czerwonego tekstu „wielkości” na niebieskim tle po prostu odwróci uwagę dużej części odwiedzających witrynę. Moim zdaniem masz profesjonalny obowiązek przekonać swojego klienta, aby go nie używał.

Mam nadzieję, że przewidziane łącza może pomóc uczynić swoją sprawę w bardziej wydajny sposób niż po prostu twierdząc, że ty trudno odczytać. Jest to w rzeczywistości provably trudne do odczytania.

Chromostereopsis

Jeśli to nie było wystarczająco przekonujące, spróbuj tego - Chromostereopsis jest (krótko!) Złudzeniem optycznym, które powoduje problemy z głębią pola dla widzów. To nieprzyjemne!

mayersdesign
źródło

11

Aby wyjaśnić, współczynniki kontrastu w dokumencie W3C są wartościami minimalnymi . Nie mów, że stosunek powinien wynosić między 4,5: 1 lub 7: 1; mówią, że powinien to być co najmniej jeden z tych, w zależności od poziomu dostępności, na który kierujesz reklamy.

Adrian McCarthy

1

Bardzo dobrze, zaktualizowałem odpowiedź, aby zawierała więcej szczegółów, zwłaszcza tę.

mayersdesign

8

Chociaż w żadnym wypadku nie jest doskonały (ani nawet dobry), dodanie białego (lub innego) konturu do tekstu może pomóc w czytelności:

Może to być przydatne, jeśli klient nalega na zachowanie kolorów.

Zły duch
źródło

Szczerze mówiąc, działa to tylko z typem 36pt.

user8356

Tak, świetna koncepcja. Nie oznacza to sarkazmu. Im więcej go zastosujesz, tym lepiej będziemy mogli odczytać tekst. Więc weź białe kontury aż do krawędzi ekranu ... Mrugnij, mrugnij.

Martin Zaske

8

Nie możesz Te odcienie czerwieni i niebieskiego są ciemnymi, nasyconymi kolorami, praktycznie wibrują względem siebie, a ten tekst spowoduje, że ludzie zaczną krwawić. Każdy programista lub projektant, który nie dba o czytelność tekstu, powinien zostać wyrzucony z miasta na rubinowej szynie.

Spróbuj rozjaśnić czerwony DUŻO. Będzie wyglądać na różowo, ale będzie bardziej czytelny. Lub użyj białego lub jasnożółtego na tym tle. Ciemne tła są bardzo trudne do odczytania. Możesz mieć ten sam ogólny kolor - zielonkawo-niebieski - ale znacznie go rozjaśnić. Ale jasnoczerwony tekst też nigdy nie jest łatwy do odczytania, więc po prostu odrzuciłbym ten schemat kolorów dla tekstu.

użytkownik8356
źródło

7

Jak już wspomniano, to okropny kontrast kolorów. Jest to także zła paleta dla osób niewidomych (w przypadku czerwono-niebieskiej ślepoty na kolory współczynnik kontrastu spada do czegoś cholernie zbliżonego do 1: 1, co jest całkowicie nieczytelne).

Najlepszym rozwiązaniem będzie przekonanie klienta, że nie powinien mieszać kolorowego tekstu i tła. Pokoloruj tekst lub tło, a nie oba jednocześnie. Spróbuj załadować makietę do narzędzia, które pozwala symulować postrzeganie ślepej na kolory (można znaleźć kilka przyzwoitych opcji online) i pokazać klientowi wynik, który powinien znacznie pomóc w ich przekonaniu.

Jeśli nie jest to możliwe, do innych można spróbować poprawić czytelność (zauważ, że żadne z nich nie rozwiązuje problemu ślepoty barw, pomagają jedynie w kontrastie lub ogólnej czytelności:

Użyj czcionki z pojedynczymi odstępami. Brzmi głupio, ale tak naprawdę pomaga większości ludzi łatwiej czytać tekst. Oczywiście nie Courier New, ale Bitstream Vera Sans Mono (lub nawet coś takiego jak Droid Sans Mono) powinien nadal wyglądać przyzwoicie i będzie nieco bardziej czytelny.
Zwiększ wagę czcionki i prawdopodobnie również jej rozmiar. Większy, odważniejszy tekst jest łatwiejszy do odczytania, niezależnie od kontrastu.
Zamień schemat kolorów (to znaczy, że będzie ciemnoniebieski tekst na jasnym czerwonym tle). Brzmi prosto, ale generalnie łatwiej jest większości ludzi przygotować ciemnoniebieski na jasnoczerwony niż na odwrót.
Dodaj wąski cień o wysokim kontraście do tekstu z przesunięciem. To, czego chcesz tutaj, nie jest wtopieniem w tło, to twarda krawędź, która zapewnia dobry kontrast. Przesunięcie cienia również może w tym pomóc, zwłaszcza proste przesunięcie po przekątnej. Wybrałbym tu również czarny zamiast białego (chcesz podkreślić tekst, a nie tło, więc wybierz wysoki kontrast z tekstem). Ogólnie rzecz biorąc, coś w tym stylu text-shadow: 2px 2px 4px black;jest prawdopodobnie dobrym miejscem startowym.
Znacząco rozjaśnij czerwony. Teraz używasz rgb(255,0,0). rgb(255,204,204)Najpierw spróbuję z czymś takim (a może nawet lżejszym) i zacznę od tego dostosowywać.
Przyciemnij niebieski. Coś bliższego rgb(25,51,77)ma ten sam odcień, ale powinno być wystarczająco ciemne, aby tekst był bardziej czytelny.

Jeszcze jedna opcja, która pomaga również niektórym z problemem ślepoty na kolory:

Desaturate niebieskie tło. Chociaż nie jest to najlepsza opcja (nieco wypacza schemat kolorów), powinno to pomóc w czytelności najbardziej spośród wszystkich innych rzeczy, które wymieniłem, ponieważ aktywnie zwiększy kontrast. Spróbuję o około 30% niższe nasycenie (to rgb(82,102,122)) jako punkt wyjścia.

Austin Hemmelgarn
źródło

6

Jeśli próbowałeś już cienia tekstu, myślę, że jedyną możliwością utrzymania tych samych kolorów jest utworzenie zakresu tekstu

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

Style

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
źródło

1

Lub nawet twarda, gładka biel jest lepsza

aloisdg mówi Przywróć Monikę

1

te wciąż są dla mnie trudne do odczytania.

Happy Hour Coding

@Dylan co sądzisz o jsfiddle.net/bersbers/xdkj76L3

bers

2

Jest czytelny. Nie sądzę, że to dobry pomysł. Ale można to przeczytać.

Kodowanie Happy Hour

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

yunzen

5

Musisz mieć wystarczająco wysoki współczynnik kontrastu między tłem a tekstem (obiekt na pierwszym planie), aby był czytelny, przy minimalnym stosunku kontrastu wynoszącym 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance pokazuje, że twoje tło i pierwszy plan są zbyt blisko siebie, aby były czytelne.

Czasami klient musi zostać poinformowany, że kolorystyka nie może być w pełni zachowana i musi zostać zmieniony w celu spełnienia wymagań dotyczących czytelności. Oczywiście odwrócenie tekstu do jasnego koloru dałoby wystarczający kontrast na ciemnym tle.

Max Tokman
źródło

3

„Jak zwiększyć czytelność tekstu?” Krótko mówiąc, ty nie! Kombinacja kolorów nie spełnia wytycznych dostępności sieci i nie należy jej używać. Należy użyć innego koloru pierwszego planu lub tła. Bez względu na to, kim jest twoja docelowa grupa docelowa, zawsze powinieneś starać się zaspokoić potrzeby osób z wadami wzroku, a to jest łatwa naprawa.

Współczynniki kontrastu dla kombinacji kolorów można zobaczyć tutaj ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

Andrzej
źródło

2

(Za mało punktów do skomentowania)

Możesz spróbować dodać obrys do tekstu. Używam terminu „obrys” w sensie Photoshopa, w zasadzie koloru obramowania / konturu tekstu, który służy jako kontrast. Czerń / biel powinny być w porządku (szczególnie jeśli grasz z grubością obrysu), ale wyobrażam sobie, że pewne odcienie czerwieni / niebieskiego też mogą działać.

allthemikeysaretaken
źródło

Jak sprawić, by ta kombinacja kolorów była bardziej czytelna?

Odpowiedzi:

Zmień zdanie klienta.