浅色背景中的深色文本
文本的不透明度取决于背景色是深色还是浅色的。对于浅色背景中的深色文本,使用以下不透明度:
- 最重要的文本使用 87% 的不透明度
- 在视觉层次结构中较低的辅助文本使用 54% 的不透明度
- 文本提示(例如文本框和标签)、禁用状态的文本的视觉层次更低,使用 38% 的不透明度
暗色文本(#000000) | 不透明度 |
主文本 | 87% |
辅助文本 | 54% |
禁用状态的文本、提示文本 | 38% |
分隔线 | 12% |
暗色背景上的白色文本
彩色背景上的白色文本应该使用 100% 的不透明度。
此表格显示了深色背景中的白色文本的相对重要性。
亮色文本(#FFFFFF) | 不透明度 |
主文本 | 100% |
辅助文本 | 70% |
禁用状态的文本、提示文本 | 50% |
分隔线 | 12% |
图标等元素
图标之类的元素使用具有 38% 不透明度的白色或黑色,以使它们能在任何颜色的背景上使用。
深色图标(#000000) | 不透明度 |
可用的图标 | 54% |
禁用的图标 | 38% |
亮色图标(#FFFFFF) | 不透明度 |
可用的图标 | 100% |
禁用的图标 | 50% |