Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Web quality readability


May 27, 2021 Site quality


Table of contents


Web Quality - Readability


Using fonts and colors correctly makes your site easier to read.


Pay attention to the contrast of colors

White on black or black on white is best for people with poor eyesight or for poor display devices.

For gray text on a bright background, contrast is poor:

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, with equally 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)

Some 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 the spacing of letters

For readers with poor eyesight, the closest letter spacing can be difficult to read.

Text with moderate text spacing is easier to read.

Text with little spacing is difficult to read.


Be careful of your leading

The following leadings are easy to read

Text with good leading
Easier to read

The following leadings are difficult to read

Text with a small leading
Difficult to read


Avoid fancy fonts

This font is easy to read....

This font is difficult to read....


Use italics as little as possible

Normal fonts are easy to read.

Italic fonts are not so easy to read.