让UI中文字的颜色和UI背景色搭配，说起来可以是个很简单的事情。有多简单呢？一句话就行了：在深背景上用浅灰色文字，在浅背景上用深灰色文字，特别是，当你的UI中需要显示大量文字的时候。这样，你的UI通常看起来都会比较舒服。但是所谓深浅，是个模糊的感念，为了达成良好的设计，我们也需要一些量化的指标。
设计原则
无论是哪种情况，最终我们要达成的效果，就是让各种级别的文字在UI上必须是清晰可辨的。而达成这一效果的方法就是坚持同一种字体颜色，然后通过半透明度来区分不同级别的字体，不要直接调整文字颜色的RGB值。
在深背景上用浅色文字
例如，当我们在深色背景上设计时，使用白色作为文字的颜色。然后，100% / 70% / 50% / 12%是4个关键的半透明级别，分别用于显示主体文字、次要文字、禁用或提示内容以及分隔符。
在图中可以看到，在黑色背景上，我们选择的文字颜色，始终都是#000000，而只是通过了不同的半透明度，区分了不同级别的文字。
在浅背景上用深色文字
而对于浅色背景，使用黑色作为文字的颜色。此时，87% / 54% / 38% / 12%则是对应的半透明级别，用于表示主体文字、次要文字、禁用或提示内容以及分隔符。
因此，如果你打算让自己的应用支持主题切换，只要遵从这些原则，字体的显示，就应该有不错的表现。
如何应用图标
除了文字之外，UI中还有另外一类和文字类似的内容，就是图标，它们通常搭配文字一起，帮助用户更直观的理解UI的用途。无论是Web font也好，还是单独设计图标也罢，当它和文字搭配在一起的时候，让它和文字保持相同的颜色，然后也通过半透明度来区分图标的状态。
- 用于浅色背景的时候，图标颜色
#000000，用54%表示可用状态，38%表示不可用状态； - 用于深色背景的时候，图标颜色
#FFFFFF，用100%表示可用状态，50%表示不可用状态；
设计实例
接下来，我们看两个实际的例子。
首先，避免在彩色的背景上，使用大段的彩色文字。彩色的部分是用来突出重点、吸引注意力的。而大段的文字，始终都应该用白色或者黑色显示：
其次，如果你打算使用单色UI，那么不要在彩色背景上，使用低对比度颜色显示文字，这通常都看不清楚：
