Woher weiß ich beim Entwerfen einer Website, wie Benutzer die Farben sehen?

11

Woher weiß ich beim Entwerfen einer Website, wie Benutzer die Farben sehen? Ich sehe die Farben der Website anders als bei meinem Macbook und Windows Desktop / Notebook. Insbesondere kann ich auf dem Desktop keine hellen Farben sehen, z. B. sind graue Ränder von Tabellen unsichtbar.

Welches sollte mir beim Entwerfen wichtig sein? Kann ich mit einer Designlösung alle Bildschirme ziemlich ähnlich gestalten?

website-design color-conversion ahmet
quelle
Verwandte und mögliche Duplikate: Grafikdesign.stackexchange.com/questions/94401/…
Vincent
1
Und nur um die Verwirrung zu vergrößern, sind fast 10% der Menschen farbenblind - aber zumindest damit gibt es Erweiterungen für Chrome, mit denen Sie (vorausgesetzt, Sie sind es nicht) ungefähr sehen können, wie es für jemanden aussehen wird, der es ist ...
Rycochet
... und auf Unternehmensebene können Gamma / Kontrast + andere Bildschirmeinstellungen überall auf Monitoren in einer Bürosituation (Ihres Kunden) vorhanden sein, wenn sie von der IT eingerichtet werden, die häufig Fernzugriffs- und Gruppeneinstellungen zur Steuerung von PC-Netzwerken verwendet. In meiner letzten Firma befand sich die IT in einem anderen Land mit wenig Verständnis für Design - ich erhielt Administratorzugriff und fügte meinen eigenen Monitor und meine eigene Einrichtung hinzu! Die Einhaltung von Standards und die Vermeidung von Extremen ist der beste Ansatz, da einige Kunden (wie die Regierung) strikte Zugänglichkeit haben - fragen Sie dies
Applefanboy

Antworten:

23

Kurze Antwort: Sie nicht.

Längere Antwort: Es ist buchstäblich unmöglich, alle Bildschirmeinstellungen und Kalibrierungen, Umstände und visuellen (Behinderungen) der Betrachter zu berücksichtigen. Aus diesem Grund gibt es Richtlinien für beispielsweise den Kontrast von Text und dessen Hintergrund, um zumindest in den meisten Fällen eine gewisse Benutzerfreundlichkeit zu gewährleisten.

Mein persönlicher Workflow umfasst mindestens zwei nicht kalibrierte Monitore und einige Tests auf verschiedenen Mobilgeräten in verschiedenen Beleuchtungssituationen.

Das W3C hat einige Richtlinien zur Verwendung von Farbe und zum erforderlichen Kontrast erstellt, die Sie hier lesen können . Persönlich verwende ich dieses Kontrastwerkzeug für Text von Lea Verou, um zu überprüfen, ob meine Textfarben den Richtlinien entsprechen oder zumindest nahe beieinander liegen.

Vincent
quelle
8
Ich frage mich, ob die SE-Leute diese Richtlinien gelesen haben. Ich habe eine ziemlich gute Sicht, aber der Kontrast zwischen dem Hintergrund und der Link-Hervorhebungsfarbe auf vielen SE-Sites (einschließlich dieser) ist schlecht.
Barmar
1
Ich wünschte, ich könnte dies mehr als einmal positiv bewerten! Ich selbst benutze eine Browser-Erweiterung für dunkle Lesegeräte. Egal wie hübsch Ihre Website ist, ich werde sie nur zerstören, um mit fünfzig noch ein anständiges Sehvermögen zu haben!
PieBie
Laut dieser Website, webaim.org/resources/contrastchecker , entspricht der Farbkontrast zwischen Hintergrund und Links nicht den Barrierefreiheitsstandards auf dieser SE-Site. Es ist also wahrscheinlich sicher anzunehmen, dass die SE-Leute solche Richtlinien nicht lesen.
ESR
2

Sie tun dies nicht und können nicht dieselben Einstellungen auf allen Monitoren / Geräten steuern oder erzwingen. Das Beste, was Sie tun können, ist die Verwendung eines sRGB-Farbprofils beim Exportieren von Rasterbildern für das Web.

sRGB ist der weltweite Standardfarbraum für die Farbwiedergabe im Web.

Dies wird bis zu einem gewissen Grad hilfreich sein, aber letztendlich entscheiden die eigenen Vorlieben eines Benutzers darüber, wie Bilder auf seinem Gerät angezeigt werden. Dies gilt natürlich für Rasterbilder, nicht für andere grafische Elemente auf einer Seite.

Billy Kerr
quelle
Und kalibrieren Sie Ihre Displays auf sRGB, damit zumindest Ihre Displays zeigen, was es sein soll
joojaa
Kommentare sind nicht für eine ausführliche Diskussion gedacht. Dieses Gespräch wurde in den Chat verschoben .
Vincent
1

Moderne Browser und Computer haben heutzutage selten Probleme, die richtigen Farben anzuzeigen (siehe https://websafecolors.info/learn für einige Informationen dazu).

Es scheint, als könnten die Displays selbst die Farben anders erscheinen lassen. Dies kann an den Einstellungen für Monitorhelligkeit, Kontrast und Blaulichtpegel und sogar an der Technologie des Monitors selbst wie LED- und Panel-Typ liegen. Es gibt keine Möglichkeit, konsistente Einstellungen für alle Anzeigen zu erzwingen oder deren Einstellungen zu lesen und die Website anzupassen.

Ich würde empfehlen, Inspect Element zu verwenden und den Hex-Code der Farben auf jeder Plattform zu betrachten. Wenn sie identisch sind, wissen Sie, dass es sich um die Anzeigen handelt. Die Lösung besteht darin, Farben mit mehr Kontrast zueinander zu verwenden, damit sie auf allen Bildschirmen besser zur Geltung kommen. Alternativ können Sie dickere Ränder oder sogar randlos gepolsterte Tische ausprobieren! Die meisten Benutzer haben hochauflösende Bildschirme, die viele Möglichkeiten für das Tabellendesign eröffnen, bei dem normalerweise pixelreicher Text und Formatierung verwendet werden.

LloydTao
quelle
0

Die Antwort lautet Nein, da die Laptop- und Desktopfarbe nicht für jeden Computer gleich sind. Sie können den Farbcode verwenden, wenn Sie sicherstellen möchten, dass die Farbe identisch ist. Sie können diesen Code beispielsweise in CSS eingeben:

background-color: #D2B48C
Sally_2891
quelle
2
Hallo Sally, ich habe die Schriftart in deiner Antwort korrigiert, aber ich weiß nicht genau, wie dies eine Antwort auf die Frage ist. Könnten Sie näher darauf eingehen?
PieBie
Dies löst das eigentliche Problem nicht. Das Problem ist, dass #D2B48C es auf verschiedenen Monitoren unterschiedlich aussieht, und die Frage ist, wie man das löst.
Pipe