Home About Contact

Text Palette

Chart of readable text/background color combinations according to World Wide Web Consortium (W3C) guidelines.1


Text is the primary communication and entertainment medium in the tildeverse. Whether we are playing at a shell or surfing hand-crafted Web pages, the view is usually dominated by text.

Color is an important part of the text experience and can make the difference between delight and pain when reading a screen. The right colors can set a mood or theme for a program or site. The wrong colors can cause physical discomfort and drown out the message the text is trying to communicate. But of the 275 trillion possible combinations of text and background color, which are the right ones?

The chart below was generated by a program that considers all the text and background color combinations possible using only the values of 0, 85, 170, and 255 for red, green, and blue components, then outputs those combinations that meet W3C readability guidelines (hue difference of 500 or more and brightness difference of 125 or more). There are millions of "in-between" color combinations not considered that also meet W3C readability criteria. Some of the combinations shown don't meet my personal standards of readability. Font typeface and size also make a difference for readability. But the chart at least provides a manageable set of generally adequate choices to inspire your terminal and web page viewing pleasure.

Unfortunately, my favorite phosphor green on black combination doesn't make the W3C cut.2

Source: Richard H. Hall. Color Combinations and Readability. Missouri University of Science and Technology. <http://web.mst.edu/~rhall/web_design/color_readability.html> accessed December 30, 2014.

BG
color
Text color
Hue difference
Brightness diff.
#000#0ff
510 178
#5af
510 154
#5fa
510 194
#5ff
595 204
#a5f
510 129
#aaa
510 170
#aaf
595 179
#af5
510 210
#afa
595 219
#aff
680 229
#f5a
510 145
#f5f
595 155
#fa5
510 185
#faa
595 195
#faf
680 205
#ff0
510 225
#ff5
595 235
#ffa
680 245
#fff
765 255
#005#5ff
510 194
#aaf
510 170
#af0
510 190
#afa
510 210
#aff
595 219
#f5f
510 145
#fa0
510 166
#faa
510 185
#faf
595 195
#ff0
595 216
#ff5
510 225
#ffa
595 235
#fff
680 245
#00a#5f0
510 155
#aa0
510 131
#af0
595 181
#af5
510 190
#aff
510 210
#fa0
595 156
#fa5
510 166
#faf
510 185
#ff0
680 206
#ff5
595 216
#ffa
510 225
#fff
595 235
#00f#5f0
595 146
#5f5
510 155
#aa5
510 131
#af0
680 171
#af5
595 181
#afa
510 190
#fa0
680 146
#fa5
595 156
#faa
510 166
#ff0
765 196
#ff5
680 206
#ffa
595 216
#fff
510 225
#050#5ff
510 154
#aaf
510 129
#afa
510 170
#aff
595 179
#faa
510 145
#faf
595 155
#ff5
510 185
#ffa
595 195
#fff
680 205
#055#aff
510 170
#faf
510 145
#ff0
510 166
#ffa
510 185
#fff
595 195
#05a#af0
510 131
#ff0
595 156
#ff5
510 166
#fff
510 185
#05f#af5
510 131
#ff0
680 146
#ff5
595 156
#ffa
510 166
#0a0#aff
510 129
#ffa
510 145
#fff
595 155
#0a5#fff
510 145
#0fa#500
510 143
#0ff#000
510 178
#500
595 153
#505
510 143
#a00
680 127
#500#0fa
510 143
#0ff
595 153
#5ff
510 178
#aaf
510 154
#afa
510 194
#aff
595 204
#f5f
510 129
#faa
510 170
#faf
595 179
#ff5
510 210
#ffa
595 219
#fff
680 229
#505#0ff
510 143
#aff
510 194
#faf
510 170
#ff0
510 190
#ffa
510 210
#fff
595 219
#50a#af0
510 155
#fa0
510 131
#ff0
595 181
#ff5
510 190
#fff
510 210
#50f#af0
595 146
#af5
510 155
#fa5
510 131
#ff0
680 171
#ff5
595 181
#ffa
510 190
#550#aff
510 154
#faf
510 129
#ffa
510 170
#fff
595 179
#555#fff
510 170
#55a#ff0
510 131
#55f#ff5
510 131
#5a0#fff
510 129
#5af#000
510 154
#5f0#00a
510 155
#00f
595 146
#5f5#00f
510 155
#5fa#000
510 194
#a00
510 143
#5ff#000
595 204
#005
510 194
#050
510 154
#500
510 178
#a00
595 153
#a05
510 143
#f00
680 127
#a00#0ff
680 127
#5fa
510 143
#5ff
595 153
#aff
510 178
#faf
510 154
#ffa
510 194
#fff
595 204
#a05#5ff
510 143
#fff
510 194
#a0a#ff0
510 155
#a0f#ff0
595 146
#ff5
510 155
#a50#fff
510 154
#a5f#000
510 129
#aa0#00a
510 131
#aa5#00f
510 131
#aaa#000
510 170
#aaf#000
595 179
#005
510 170
#050
510 129
#500
510 154
#af0#005
510 190
#00a
595 181
#00f
680 171
#05a
510 131
#50a
510 155
#50f
595 146
#af5#000
510 210
#00a
510 190
#00f
595 181
#05f
510 131
#50f
510 155
#afa#000
595 219
#005
510 210
#00f
510 190
#050
510 170
#500
510 194
#f00
510 143
#aff#000
680 229
#005
595 219
#00a
510 210
#050
595 179
#055
510 170
#0a0
510 129
#500
595 204
#505
510 194
#550
510 154
#a00
510 178
#f00
595 153
#f05
510 143
#f00#5ff
680 127
#afa
510 143
#aff
595 153
#fff
510 178
#f05#aff
510 143
#f5a#000
510 145
#f5f#000
595 155
#005
510 145
#500
510 129
#fa0#005
510 166
#00a
595 156
#00f
680 146
#50a
510 131
#fa5#000
510 185
#00a
510 166
#00f
595 156
#50f
510 131
#faa#000
595 195
#005
510 185
#00f
510 166
#050
510 145
#500
510 170
#faf#000
680 205
#005
595 195
#00a
510 185
#050
595 155
#055
510 145
#500
595 179
#505
510 170
#550
510 129
#a00
510 154
#ff0#000
510 225
#005
595 216
#00a
680 206
#00f
765 196
#055
510 166
#05a
595 156
#05f
680 146
#505
510 190
#50a
595 181
#50f
680 171
#55a
510 131
#a0a
510 155
#a0f
595 146
#ff5#000
595 235
#005
510 225
#00a
595 216
#00f
680 206
#050
510 185
#05a
510 166
#05f
595 156
#500
510 210
#50a
510 190
#50f
595 181
#55f
510 131
#a0f
510 155
#ffa#000
680 245
#005
595 235
#00a
510 225
#00f
595 216
#050
595 195
#055
510 185
#05f
510 166
#0a0
510 145
#500
595 219
#505
510 210
#50f
510 190
#550
510 170
#a00
510 194
#fff#000
765 255
#005
680 245
#00a
595 235
#00f
510 225
#050
680 205
#055
595 195
#05a
510 185
#0a0
595 155
#0a5
510 145
#500
680 229
#505
595 219
#50a
510 210
#550
595 179
#555
510 170
#5a0
510 129
#a00
595 204
#a05
510 194
#a50
510 154
#f00
510 178

Notes

1 The chart was generated according to the algorithm described in the source document. However, Juicy Studio, which is cited in the source document, indicates that the W3C's guidelines have been updated and a new criterion based on contrast ratio is now recommended.

2 However, a little fiddling discovered that nearby color #0b0 passes muster.