Color and contrast

Contrast ratios illustrated

Normal weight

21: black on white or white on black.
13: grey on white or black on grey or grey on black or contrasting greys.
10: grey on white or white on grey or grey on grey.
7.5: grey on white or white on grey or grey on grey.
4.5: grey on white or white on grey or black on grey or grey on grey.
3: grey on white or white on grey or black on grey or grey on grey.
2: grey on white or white on grey or black on grey or grey on grey.
1: white on white or black on black or grey on grey .

light weight

21: black on white or white on black.
13: grey on white or black on grey or grey on black or contrasting greys.
10: grey on white or white on grey or grey on grey.
7.5: grey on white or white on grey or grey on grey.
4.5: grey on white or white on grey or black on grey or grey on grey.
3: grey on white or white on grey or black on grey or grey on grey.
2: grey on white or white on grey or black on grey or grey on grey.
1: white on white or black on black or grey on grey .

high weight

21: black on white or white on black.
13: grey on white or black on grey or grey on black or contrasting greys.
10: grey on white or white on grey or grey on grey.
7.5: grey on white or white on grey or grey on grey.
4.5: grey on white or white on grey or black on grey or grey on grey.
3: grey on white or white on grey or black on grey or grey on grey.
2: grey on white or white on grey or black on grey or grey on grey.
1: white on white or black on black or grey on grey .

heavy weight

21: black on white or white on black.
13: grey on white or black on grey or grey on black or contrasting greys.
10: grey on white or white on grey or grey on grey.
7.5: grey on white or white on grey or grey on grey.
4.5: grey on white or white on grey or black on grey or grey on grey.
3: grey on white or white on grey or black on grey or grey on grey.
2: grey on white or white on grey or black on grey or grey on grey.
1: white on white or black on black or grey on grey .

Helvetica Neue Light

21: black on white or white on black.
13: grey on white or black on grey or grey on black or contrasting greys.
10: grey on white or white on grey or grey on grey.
7.5: grey on white or white on grey or grey on grey.
4.5: grey on white or white on grey or black on grey or grey on grey.
3: grey on white or white on grey or black on grey or grey on grey.
2: grey on white or white on grey or black on grey or grey on grey.
1: white on white or black on black or grey on grey .

Apple's 5.5 contrast

Google's 4.6 contrast

Colours illustrated

There are several ways to specify colours on the web. By name:

black black
grey grey
pink pink
lightgrey lightgrey
white white

The way colours are specified on the web is by supplying numbers for red, green and blue from 0-255. These are expressed as hex digits 0123456789ABCDEF. If the r,g,b match, they're a grey.

#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff
#000 #222 #444 #666 #888 #aaa #ccc #eee #fff