Web Quality - Readability

Proper use of fonts and colors can make your website more readable.

Pay Attention to Color Contrast

For people with poor eyesight or on subpar display devices, black text on a white background or white text on a black background is optimal.

Gray text on a light background has poor contrast:

| Grey text on a white background (#EEEEEE) | | Grey text on a white background (#CCCCCC) | | Grey text on a white background (#AAAAAA) | | Grey text on a white background (#888888) | | Grey text on a white background (#666666) | | Grey text on a white background (#444444) | | Grey text on a white background (#222222) | | Grey text on a white background (#111111) |

Gray text on a dark background also has poor contrast:

| Grey text on a black background (#222222) | | Grey text on a black background (#444444) | | Grey text on a black background (#666666) | | Grey text on a black background (#888888) | | Grey text on a black background (#AAAAAA) | | Grey text on a black background (#CCCCCC) | | Grey text on a black background (#DDDDDD) | | Grey text on a black background (#EEEEEE) |

Certain combinations—such as black and red, black and blue, yellow and green—can cause visual fatigue:

| Black text on a red background | | | | Black text on a blue background | | | | Yellow text on a green background |

These combinations are not bad:

| Black text on a grey background | | | | Black text on a light blue | | | | Black text on antique white | | | | White text on dark blue |

Pay Attention to Letter Spacing

For readers with weaker eyesight, closely spaced letters can pose significant reading difficulties.

Text with moderate spacing is easier to read.

Text with little spacing is hard to read.

Be Mindful of Line Spacing

Text with good line spacing

Text with small line spacing

Avoid Fancy Fonts

This font is easy to read....

This font is hard to read....

Use Italics Sparingly

Regular font is easy to read.

Italic font is not as easy to read.