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 |
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.