kostenloser Webspace werbefrei: lima-city


Helles Grau, das noch auf weiß angenehm lesbar ist?

lima-cityForumDie eigene HomepageGrafikdesign

  1. Autor dieses Themas

    s*****d

    Hi!
    Ich arbeite zur Zeit an einem neuen Design und es soll sehr hell werden. Nach möglichkeit also weißer Hintergrund und auch ein relativ helles Grau für die Schrift. Ich frage mich nun aber bis zu welchem Graufarbton die Farbe auf weiß noch gut zu lesen ist? Kenntvihr dazu irgendwelche Studien oder so? Habe bereits etwas gesucht aber nichts gefunden... Oder könnt ihr aus eigener Erfahrung sprechen? Ich möchte ungern ständig die ganzen Grautöne ausprobieren müssen.

    MfG. Simon D.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 1. Ich hoffe, dein Monitor ist kalibriert, sonst macht das ganze keinen Sinn.
    2. Ich hoffe, du hast genügend Endgeräte, um verschieden Displays zu testen.

    Wenn ja:
    Öffne Inkscape, erstelle eine Form und ändere die Farbe. Dank den Slidern, die du bekommst, wenn du doppelt auf die Farben drückst kannst du schnell etwas finden, ohne umständlich hin und her zu müssen.

    Ansonsten würde ich nochmal überlegen, ob du Texte wirklich schlecht leserlich (weil kontrastarm) nutzen möchtest. :)
  4. Helles Grau auf weiß... naja... du könntest ja text schatten verwenden.
    Hier ein Beispiel:

    p
    {
        background: #fff;
        color: #CCCCCC;
        text-shadow: 0 -1px 0px #666666, 0 1px 1px #FFFFFF;
    }


    Bild

    Bei kleiner Schrift und auf älteren Displays wirkt es leicht verschwommen.

    Ohne Text Schatten würde ich dir bei der Textfarbe mindestens #888 empfehlen. Hintergrund kann weiß bleiben.

    Du kannst dir ja meine Website anschauen, helles Design, Hintergrund #f1f1f1, Textfarbe #797777

    Wie tchab auch schon erwähnt hat, müsstest du das auf verschiedenen Displays testen. Ich hab früher auch eine helle Textfarbe verwendet und als ich sah, dass man auf älteren Display fast nichts erkennen konnte, hab ich eine dunklere Textfarbe verwendet.

    Hier ein paar Websiten: http://webmagazin.de/sites/default/files/u2372/3_16.png http://www.elmastudio.de/wp-content/uploads/2010/10/webdesign-ueber-uns-seiten-14.jpg http://t3n.de/news/wp-content/uploads/2012/05/minimalistisches_webdesign_1.jpg

    Bei dem letzten Beispiel ist die Textfarbe #b7b8ba, etwas hell, aber der Text ist fett gedruckt.
  5. Autor dieses Themas

    s*****d

    Hi!
    Danke tchab und onur-yavuz für die Antworten!!
    Ich habe mit Inkscape und http://colorschemedesigner.com/ etwas rumgespielt und bin zu Schluss, gekommen, dass es doch ein etwas dunkleres Grau nehmen werde, da ich das Design responsiv auch für Handys und Tablets verfügbar machen möchte. Ich werde, denke ich #565656 nehmen und für Sachen, die auch heller sein können/sollen nehme ich #737373. Denkt ihr, dass das gehen wird? Es schein auf Notebook, PC, Tablet und Handy, ganz ok auszuschauen.

    MfG. Simon D.
  6. Studien gibt es, zumindest in englisch. Mal mit den Stichworten luminosity contrast ratio u. accessibility googeln.

    Das W3C gibt in den Richtlinien zur Barrierefreiheit (WCAG 2.0) Empfehlungen zum minimalen Kontrastverhältnis [Link: Contrast(Minimum)]

    Ein Grauwert von #737373 liegt schon am Rande des empfohlenen Kontrastverhältnisses von 4,5:1

    Diese Empfehlung ist wirklich nur als Näherungswert zu sehen, der (wie die Vorposter schon schrieben) einen sauber eingestellten, fehlerfrei funktionierenden Monitor und einen durschnittlich gut sehenden Leser voraussetzt. Abhängig ist die Wirkung und Lesbarkeit zusätzlich von Schriftgröße, -stärke und den Lichtverhältnissen rund um den Monitor beim Anwender.

    Zur schnellen Bestimmung des Kontrastverhältnisses gibt es auch Tools. z.B. dieses:
    Luminosity Colour Contrast Ratio Analyser

    Meine Empfehlung: Gerade bei kleinerer Schrift und Fließtext einen hohen Kontrastwert wählen. Lesbarkeit ist wichtiger, als Design.
  7. Ich wusste zugegeben nicht, dass es diese Studien gibt, aber ich denke auch, dass das nur dann für den User Sinn macht wenn man sich da auch auskennt... also helles Grau auf Weiß macht für mich nur dann Sinn, wenn auch ein Schatten dabei ist.
  8. germantypography

    germantypography hat kostenlosen Webspace.

    Habe es selber mal auf einer Website angewendet, sieht ganz nett aus.
    Nur das ganze hatte für meine erst einen Sinn nachdem ich einen Schatten hinzugefügt habe, da es sonst auf verschieden Geräten immer verschieden zu sehen war.. :)
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!