面试题：CSS color与font - size在无障碍设计及性能优化方面的深度最佳实践

Question

从无障碍设计角度出发，阐述color与font - size应遵循哪些标准以确保视障用户也能良好地访问网页。同时，在大型项目中，如何通过优化color和font - size的使用来提升页面性能，例如减少重排重绘次数，结合具体的工具和策略进行说明。

Answer 1

无障碍设计角度的 color 和 font - size 标准

1. color
   • 足够的对比度：前景色（如文本颜色）与背景色之间需有足够的对比度，以便视障用户能清晰区分。一般来说，正常视力人群文本对比度至少为 4.5:1，大文本（18pt 及以上或 14pt 加粗及以上）对比度至少为 3:1。例如，避免在浅蓝色背景上使用浅灰色文本。可使用工具如 WebAIM 的对比度检查器（https://webaim.org/resources/contrastchecker/ ）来验证。
   • 避免仅靠颜色传达信息：视障用户可能无法感知颜色差异。比如，不能仅通过将错误提示文本标为红色来传达错误信息，还应添加图标、文字说明等辅助方式。
2. font - size
   • 可调整性：字体大小应能方便用户调整。网页不应设置固定的、无法缩放的字体大小。使用相对单位（如 em、rem）而非绝对单位（如 px）。例如，设置 font - size: 1.2em; 意味着字体大小是父元素字体大小的 1.2 倍，当用户调整浏览器默认字体大小时，页面字体也会相应缩放。
   • 最小尺寸：确保文本有足够的可读性，最小字体大小不宜过小。一般建议正文文本至少为 16px（在常规屏幕分辨率下）。

提升页面性能 - 减少重排重绘次数

1. color
   • 策略：避免频繁动态改变颜色。如果必须改变颜色，尽量批量修改。例如，不要在循环中逐个改变元素的颜色，而是先将需要改变颜色的元素收集起来，然后一次性改变它们的颜色样式。
   • 工具：利用 CSS 预处理器（如 Sass、Less），通过变量管理颜色。在需要改变颜色主题时，只需修改变量值，而不是在大量的 CSS 规则中逐个修改颜色值，减少样式计算和重排重绘。例如：

$primary - color: #007bff;
body {
  background - color: $primary - color;
}

2. font - size
   • 策略：避免在页面加载后频繁改变字体大小。如果要实现响应式字体大小变化，使用媒体查询提前设置好不同屏幕尺寸下的字体大小，而不是在运行时动态改变。例如：

@media (min - width: 768px) {
  body {
    font - size: 18px;
  }
}
@media (min - width: 992px) {
  body {
    font - size: 20px;
  }
}

• 工具：使用 CSS 加载性能优化工具，如 PurgeCSS，去除未使用的字体大小相关的 CSS 规则，减少样式表体积，加快渲染速度。它可以分析 HTML 和 JavaScript 文件，找出实际使用的 CSS 规则，删除冗余的部分。