DesignForMonochromeDisplays

Use text decoration to emphasize or differentiate text, rather than color. For example, use bold-face text rather than red text for emphasis.

Bad:

<span style="text-color: red">Important</span>

Good:

<b>Important</b>

Prefer dark foreground text or graphics on a light background. Monochrome devices may default to black foreground on white background.

Bad:

<!-- light red on dark green -->
<p style="background-color: #003300"><span style="color: #FFCCCC">Text</span></p>

Good:

<!-- dark red on light green instead -->
<p style="background-color: #CCFFCC"><span style="color: #330000">Text</span></p>

Avoid foreground/background colors of similar value. Prefer clearly light foreground text or graphics on clearly dark background or vice versa. If the foreground and background are too close in value, monochrome devices may dither both to white or both to black, rendering the information unreadable.

Bad:

<!-- medium red on medium green -->
<p style="background-color: green"><span style="color: red">Text</span></p>

Good:

<!-- dark red on light green instead -->
<p style="background-color: #CCFFCC"><span style="color: #330000">Text</span></p>