Vuetify 3中on前缀颜色的使用场景及重定义必要性咨询

你的理解是否正确？ #

完全正确。on-*系列颜色的核心作用就是作为对应底色上的内容（文本、图标等）颜色，通过对比色来保证内容的可读性。比如你举例的background: #000搭配on-background: #FFF，就是典型的黑底白字高对比度组合，符合视觉设计的基本逻辑。

on-前缀颜色的具体使用场景 #

• 核心逻辑：所有on-*色都是为了匹配对应的*底色，解决内容与背景的对比度问题，满足无障碍设计要求
• 细分场景：
  • on-primary/on-secondary/on-accent：用于主色、次色、强调色按钮、导航栏、标签栏等组件内的文本或图标
  • on-background：页面全局背景上的正文文本、基础图标
  • on-surface：卡片、弹窗、卡片式列表这类表层容器上的文本、图标
  • on-error/on-success/on-info/on-warning：对应状态提示组件（错误提示条、成功通知、信息提示、警告弹窗）内的文本或图标
  • 带lighten-*/darken-*后缀的on-色：匹配对应深浅的底色变体，比如primary-lighten-3背景容器上，用on-primary-lighten-3来保证文本可读性

是否值得重定义on-前缀颜色？ #

完全值得，但要注意以下两点：

1. 符合品牌设计规范：如果你的产品有明确的品牌色体系，默认的on-*色不符合品牌视觉风格，重定义是必要的
2. 保证对比度达标：重定义时必须遵循WCAG无障碍标准，文本与背景的对比度至少达到4.5:1（大文本可放宽到3:1）。你当前把所有on-*都设为#FFFFFF，如果对应的底色都是深色系没问题，但如果遇到浅色底色（比如primary-lighten-5这类极浅的颜色），白字会几乎不可见，这时候就要针对性调整对应的on-色为深色

你提供的重定义代码示例 #

'on-background': '#FFFFFF',
'on-surface': '#FFFFFF',
'on-primary': '#FFFFFF',
'on-secondary': '#FFFFFF',
'on-error': '#FFFFFF',
'on-info': '#FFFFFF',
'on-success': '#FFFFFF',
'on-warning': '#FFFFFF',
'on-accent': '#FFFFFF',
'on-primary-lighten-5': '#FFFFFF',
'on-primary-lighten-4': '#FFFFFF',
'on-primary-lighten-3': '#FFFFFF',
'on-primary-lighten-2': '#FFFFFF',
'on-primary-lighten-1': '#FFFFFF',
'on-primary-darken-1': '#FFFFFF',
'on-primary-darken-2': '#FFFFFF',
'on-primary-darken-3': '#FFFFFF',
'on-primary-darken-4': '#FFFFFF',
'on-secondary-lighten-5': '#FFFFFF',
'on-secondary-lighten-4': '#FFFFFF',
'on-secondary-lighten-3': '#FFFFFF',
'on-secondary-lighten-2': '#FFFFFF',
'on-secondary-lighten-1': '#FFFFFF',
'on-secondary-darken-1': '#FFFFFF',
'on-secondary-darken-2': '#FFFFFF',
'on-secondary-darken-3': '#FFFFFF',
'on-secondary-darken-4': '#FFFFFF',
'on-error-lighten-4': '#FFFFFF',
'on-error-lighten-3': '#FFFFFF',
'on-error-lighten-2': '#FFFFFF',
'on-error-lighten-1': '#FFFFFF',
'on-error-darken-1': '#FFFFFF',
'on-error-darken-2': '#FFFFFF',
'on-error-darken-3': '#FFFFFF',
'on-error-darken-4': '#FFFFFF',
'on-warning-lighten-4': '#FFFFFF',
'on-warning-lighten-3': '#FFFFFF',
'on-warning-lighten-2': '#FFFFFF',
'on-warning-lighten-1': '#FFFFFF',
'on-warning-darken-1': '#FFFFFF',
'on-warning-darken-2': '#FFFFFF',
'on-warning-darken-3': '#FFFFFF',
'on-warning-darken-4': '#FFFFFF',
'on-info-lighten-4': '#FFFFFF',
'on-info-lighten-3': '#FFFFFF',
'on-info-lighten-2': '#FFFFFF',
'on-info-lighten-1': '#FFFFFF',
'on-info-darken-1': '#FFFFFF',
'on-info-darken-2': '#FFFFFF',
'on-info-darken-3': '#FFFFFF',
'on-info-darken-4': '#FFFFFF',
'on-success-lighten-4': '#FFFFFF',
'on-success-lighten-3': '#FFFFFF',
'on-success-lighten-2': '#FFFFFF',
'on-success-lighten-1': '#FFFFFF',
'on-success-darken-1': '#FFFFFF',
'on-success-darken-2': '#FFFFFF',
'on-success-darken-3': '#FFFFFF',
'on-success-darken-4': '#FFFFFF',

内容的提问来源于stack exchange，提问作者Hopex Development