I think it mostly comes down to contrast, and black on white is some of the highest contrast possible; one could argue for complementary colours providing more contrast but that’s a different kind of contrast, I think personally it’s mainly about light and dark, not colour v. colour even though human vision is so centred on colour.

I’m reading a book at the moment where each chapter has a different colour for the title and some related text, many of the colours picked are strong enough that legibility even at around 14pt is fine but they went far too light in a few cases and it’s a struggle to read.

A general observation I’ve made over the years: yellow text on white is rarely a good thing. It can work for headings, especially with a blocky face and a darker yellow, but a light yellow like a single pass of process yellow can make type that’s incredibly hard to see properly much less read.

i've noticed that about yellow, also.

it looks ok on red.

which for color theory follows the triad rule.

reducing the saturation for Process Yellow makes it less dazzeling.

> i'm thinking specifically for long form
> writing, blog posts, books, and magazines.

There are many factors that go into good design, and readability is only one of them. Otherwise we'd always use the easiest-to-read fonts and discard the rest. But in long-form documents, readability becomes a higher priority. I think putting a few paragraphs in reversed type (like white type on a colored background) is fine, or maybe even a whole page that way in a magazine article, but I wouldn't advise a whole book done that way. However I've seen blogs done that way that looked fine, but in those you're reading in smaller chunks.

Very low contrast combinations, like yellow on white, are generally hard to read, although it might work for a large headline.

It's important to consider the age of the target audience, as vision generally gets worse as we age. I wouldn't use tiny type or hard-to-read color combinations in an article aimed at seniors, but I might consider it for an article written for young folks.

I think there's a case to be made for staying a back from maximum contrast, especially for onscreen work.

hhp

"There are many factors that go into good design, and readability is only one of them. Otherwise we'd always use the easiest-to-read fonts and discard the rest. But in long-form documents, readability becomes a higher priority."

agreed. that's why i'm focusing on long form, blog posts, books, and magazines here. As an example, Found Typography may be well designed, but it's not the most readable.

" I think putting a few paragraphs in reversed type (like white type on a colored background) is fine, or maybe even a whole page that way in a magazine article, but I wouldn't advise page after page done that way."

a good example of reverse type is in this article: http://ilovetypography.com/2013/01/12/a-firm-turn-toward-the-objective-j...

"Very low contrast combinations, like yellow on white, are generally hard to read, although it might work for a large headline."

the headline below certainly looks darker than the body text.

"It's important to consider the age of the target audience, as vision generally gets worse as we age. I wouldn't use tiny type or hard-to-read color combinations in an article aimed at seniors, but I might consider it for an article written for young folks."

that's a great point.

on the other hand, i've seen enough hard-to-read text, particularly on the web, to make me err on the side of readability as a fanatical default.

i wrote a bookmarklet in javascript which changes body text to 16px/24px, because of this.

"There are many factors that go into good design, and readability is only one of them. Otherwise we'd always use the easiest-to-read fonts and discard the rest. But in long-form documents, readability becomes a higher priority."

agreed. that's why i'm focusing on long form, blog posts, books, and magazines here. As an example, Found Typography may be well designed, but it's not the most readable.

" I think putting a few paragraphs in reversed type (like white type on a colored background) is fine, or maybe even a whole page that way in a magazine article, but I wouldn't advise page after page done that way."

a good example of reverse type is in this article: can't link to it because of the spam filter. it's called, "A Firm Turn Toward the Objective: Josef Müller-Brockmann 1948–1981"

"Very low contrast combinations, like yellow on white, are generally hard to read, although it might work for a large headline."

the headline below certainly looks darker than the body text.

"It's important to consider the age of the target audience, as vision generally gets worse as we age. I wouldn't use tiny type or hard-to-read color combinations in an article aimed at seniors, but I might consider it for an article written for young folks."

that's a great point.

on the other hand, i've seen enough hard-to-read text, particularly on the web, to make me err on the side of readability as a fanatical default.

i wrote a bookmarklet in javascript which changes body text to 16px/24px, because of this.

…it's ok to use pure hues when there's only a small amount of text.

Think solid spot color, rather than process or screened, which reduce the sharpness of type.

"I think there's a case to be made for staying a back from maximum contrast, especially for onscreen work."

not using maximum contrast?

i've heard it said contrast should be at least 80%. are you saying contrast shouldn't be 100%?

is this just with color, or black and white text, as well?

"Think solid spot color, rather than process or screened, which reduce the sharpness of type."

does this have the implication that colored text should be used more sparingly when done with process color and on screen, as it's less sharp compared to black?

Well, 100% contrast can only exist between total light (pure white) and total darkness (pure black), neither of which exists. What I was talking about is that historically people haven't had enough contrast (especially concerning the whiteness of the paper*) so more was always better; but I think these days we might in fact have too much contrast sometimes. So on screen using a dark gray for the text or a very light gray (or tint) for the background might be beneficial.

* Which for example motivated Baskerville to make his special paper.

hhp

"I think it mostly comes down to contrast, and black on white is some of the highest contrast possible; one could argue for complementary colours providing more contrast but that’s a different kind of contrast, I think personally it’s mainly about light and dark, not colour v. colour even though human vision is so centred on colour."

this is what process yellow on white looks like, when converted to grayscale. not very readable.

here's yellow on blue. first before grayscale, then after. readable.

here's green on red. first before grayscale, then after. way less readable than yellow on blue.

grayscale can be used as a test for the color blind.

and, looking at these, a test for readability when color is used.

If you're going to reverse out the type, I'd made the type white or a very light color. So in your yellow/blue test I'd make the yellow much lighter. Same thing with your gold/red test. Will be more attractive and more readable.

> does this have the implication that colored text should
> be used more sparingly when done with process color [on the web]...

Nick was exactly right that using spot colors on printed materials will give superior results rather than using screen tints. (So for example gray type would ideally be printed with solid gray ink, rather than as a screen tint of black.) But when type is viewed on a computer monitor you're working with a totally different process, and its simply not going to be a sharp as text from a printing press. You just need to look at it onscreen and use your own judgement.

Do be aware of the colour-independent contrast between fore and background. Don't rely on hue alone to distinguish them.

I used to work on UI design with someone who was partially colour-blind; many combinations which looked perfectly distinct to me were virtually monotone to him. I got into the habit of testing my designs by taking screen captures and converting them to greyscale to see if readability suffered.

…does this have the implication that colored text should be used more sparingly when done with process color and on screen, as it's less sharp compared to black?

In print, it depends whether it’s screened.
The worst is a beige with middle values of C and M. Those colors will have ragged edges in type, and if the registration is not bang on, even fuzzier.
But colors that are mostly C, M or K, with a touch of Y, are most sharp.

100% Magenta or Cyan can be very nice in a Light type.

"If you're going to reverse out the type, I'd made the type white or a very light color. So in your yellow/blue test I'd make the yellow much lighter. Same thing with your gold/red test. Will be more attractive and more readable."

in this case, attractiveness is unimportant. it's the principle i was concerned with.

i also used the default typeface: Arial.

"Do be aware of the colour-independent contrast between fore and background. Don't rely on hue alone to distinguish them."

redundancy's important. it can be seen in everyday things; such as traffic lights.

"I used to work on UI design with someone who was partially colour-blind; many combinations which looked perfectly distinct to me were virtually monotone to him. I got into the habit of testing my designs by taking screen captures and converting them to greyscale to see if readability suffered."

yes. i'll be doing it for every UI i design, from here on out.

"So on screen using a dark gray for the text or a very light gray (or tint) for the background might be beneficial."

dark gray text is common. not seen the background changed very often, but it makes sense that it achieves the same effect, i.e. reduces contrast.

"100% Magenta or Cyan can be very nice in a Light type."

i'll keep an eye out for that.

Hrant "I think there's a case to be made for staying a back from maximum contrast, especially for onscreen work."

You can't explain.

Do you mean I'm wrong or just inept? :-)

hhp

>You can't explain.

I don’t think you need to, anyone who is working with text to appear on screen or, even worse, projected, surely only has to look at the results to draw that conclusion.

Rather than a white background, a pale tinted background (on screen) can be the equivalent to printing on uncoated stock.

Tim

>> Will be more attractive and more readable
> in this case, attractiveness is unimportant

Okay, but it'll be easier to read if the text is lighter.

80% contrast (light reflectance value)

It's my personal observation (bordering on sort of a feeling) that as your eye scans through a body of text, slight afterimages tend to distract and interfere with legibility. Less contrast reduces the effect.

"Okay, but it'll be easier to read if the text is lighter."

it is. because of the contrast of value (light/dark). which was shown by removing the color.

and it may be easier to read if i used a different color combinations, or a different line height, or measure, or typeface, or size, additional white space, aligned differently, saved the file differently, not used latin, or turned on ligatures, but for the purpose of testing what Gräfenberg said, i.e. it's light and dark that matters, the choices were fairly arbitrary.

Try this.