5 ms·

Please don't use #444 for body copy. Anything lighter then about #222 (which typeplate has used throughout their own site) is just too low contrast on light bac

by Trezoid 14y ago

Please don't use #444 for body copy. Anything lighter then about #222 (which typeplate has used throughout their own site) is just too low contrast on light backgrounds.

ctidd 14y ago
That's a completely false generalization. Brighter than #666 will lean into the danger zone for some readers, but #444 is safe for most type, although very slightly light in perception. In any case, the ideal type color is dependent on the weight of your text.
- adlpz 14y ago
  In my opinion, the recommendation of not going above #222 is not because it's illegible per se (that would depend on font weight indeed), but because you have to take into account external uncertainties like poorly calibrated displays, ambient light, bad backlights, etc. Better be safe and go with a darker text.
  - Silhouette 14y ago
    Better be safe and go with a darker text. But darker text isn't necessarily safer, because having too much contrast is also a bad idea. That is why these guidelines about not using pure black or pure white get passed around so much in the first place.
    - jellicle 14y ago
      The idea of "too much contrast" is a very recent invention with very little support behind it. People like high-contrast reading. It's easy to read. As contrast goes up, reading rate goes up. There are hundreds of studies to that effect. Only dumb-ass designers have asserted that grey-text-on-grey-backgrounds is in any way a good thing, and they are wrong. (At least as far as conveying information goes.)
      - Silhouette 14y ago
        As contrast goes up, reading rate goes up. There are hundreds of studies to that effect. As someone who does read a lot of research about design and usability issues, I am always sceptical of people who write things like "There are hundreds of studies to that effect" yet don't cite a single one. If it were really as simple as you claim, we would all be reading white or yellow text on black screens and no-one would get headaches because their monitor was set too bright. If you really do believe in looking at empirical data, you might like to read some of the research into how excessive contrast can exacerbate negative conditions, such as the "shaking" effect seen particularly by dyslexics or the "halo" effect seen particularly by older readers.
lowboy 14y ago
Do you have any sources for this, or is it just anecdotal? The W3C states a minimum of 4.5:1 contrast ratio[0] for body copy, or 7:1 for users with poor eyesight[1]. If Snook's calculator[2] can be relied upon, this makes #444/#fff a contrast of 9.74:1. Even a darker bg of #eee yields 8.39:1. This also depends on the font weight, stroke, and size. [0]: http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast [1]: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-68-head http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr... [2]: http://snook.ca/technical/colour_contrast/colour.html http://snook.ca/technical/colour_contrast/colour.html
pdog 14y ago
Hoofer & Frere-Jones uses #444 for web copy[1], and they're a world-renowned type foundry. [1]: https://twitter.com/H_FJ/status/11800719859 https://twitter.com/H_FJ/status/11800719859

by Trezoid 14y ago

Please don't use #444 for body copy. Anything lighter then about #222 (which typeplate has used throughout their own site) is just too low contrast on light backgrounds.

ctidd 14y ago

That's a completely false generalization. Brighter than #666 will lean into the danger zone for some readers, but #444 is safe for most type, although very slightly light in perception. In any case, the ideal type color is dependent on the weight of your text.

adlpz 14y ago
In my opinion, the recommendation of not going above #222 is not because it's illegible per se (that would depend on font weight indeed), but because you have to take into account external uncertainties like poorly calibrated displays, ambient light, bad backlights, etc. Better be safe and go with a darker text.
- Silhouette 14y ago
  Better be safe and go with a darker text. But darker text isn't necessarily safer, because having too much contrast is also a bad idea. That is why these guidelines about not using pure black or pure white get passed around so much in the first place.
  - jellicle 14y ago
    The idea of "too much contrast" is a very recent invention with very little support behind it. People like high-contrast reading. It's easy to read. As contrast goes up, reading rate goes up. There are hundreds of studies to that effect. Only dumb-ass designers have asserted that grey-text-on-grey-backgrounds is in any way a good thing, and they are wrong. (At least as far as conveying information goes.)
    - Silhouette 14y ago
      As contrast goes up, reading rate goes up. There are hundreds of studies to that effect. As someone who does read a lot of research about design and usability issues, I am always sceptical of people who write things like "There are hundreds of studies to that effect" yet don't cite a single one. If it were really as simple as you claim, we would all be reading white or yellow text on black screens and no-one would get headaches because their monitor was set too bright. If you really do believe in looking at empirical data, you might like to read some of the research into how excessive contrast can exacerbate negative conditions, such as the "shaking" effect seen particularly by dyslexics or the "halo" effect seen particularly by older readers.

lowboy 14y ago

Do you have any sources for this, or is it just anecdotal? The W3C states a minimum of 4.5:1 contrast ratio[0] for body copy, or 7:1 for users with poor eyesight[1]. If Snook's calculator[2] can be relied upon, this makes #444/#fff a contrast of 9.74:1. Even a darker bg of #eee yields 8.39:1. This also depends on the font weight, stroke, and size. [0]: http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast [1]: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-68-head http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr... [2]: http://snook.ca/technical/colour_contrast/colour.html http://snook.ca/technical/colour_contrast/colour.html

pdog 14y ago

Hoofer & Frere-Jones uses #444 for web copy[1], and they're a world-renowned type foundry. [1]: https://twitter.com/H_FJ/status/11800719859 https://twitter.com/H_FJ/status/11800719859