Web、UI与CSS

文字颜色清晰吗？也检查深色模式

使用工具

工作显示器上能读的文字，在另一块屏幕可能很淡。想降低说明文字的存在感，可能无意中降低了可读性。对比度将前景与背景的亮度差整理成数值，先输入实际使用的两种颜色，再决定调整。

前景 #777777、背景 #FFFFFF 得约 4.478:1，低于普通文字 AA 的 4.5:1。改为 #767676 得约 4.542:1。小变化虽跨过界限，但设计目标不是勉强过线，还要查看实际字体、字重和背景，保留阅读余量。

白底比较

#777777 / #FFFFFF → 4.478:1
#767676 / #FFFFFF → 4.542:1
#000000 / #FFFFFF → 21:1

显示比率会舍入，但判定使用未舍入值，不能把 4.499 四舍五入成 4.5 后当通过。大文字 AA 为 3:1，但叫标题不自动算大文字，还要符合尺寸和字重条件。满足普通文字的配色更便于用于说明。

rgba(0,0,0,0.5) 配白底约为 3.977:1，因为合成后是灰色。只复制黑色 CSS 而忽略父元素透明度或叠层背景，会高估真实对比度。输入应包含实际影响显示的透明条件。

背景也透明时，需要最底层的不透明色。同一个面板放在白页或深色页会不同。工具合成指定颜色，不检查 DOM 与叠放关系；一组颜色无法评估整张图片、渐变或复杂透明层。

#E2E8F0 文字配 #0F172A 约为 14.482:1，但辅助文字、链接、选中行与悬停背景各有自己的组合。每个主题都要检查普通、悬停、聚焦、选中状态，能发现只改背景却保留深色文字等问题。

调整前先决定哪种颜色可变。固定品牌色可用于装饰或背景，正文另用易读颜色；链接可加下划线，不只依赖色相。目标是在保持信息层次时改善阅读，而非单纯提高数值。

文字够深仍可能太小、行距过紧或放大后截断。需另测真实内容、长翻译、200% 文字放大与窄屏。预览用于检查颜色组合，并非自动审计整个页面。

仅用红色表示错误、绿色表示成功，可能无法传达状态，应配合文字或图标与可见焦点。文字对比度不能直接代替边框、图表、焦点的评估，应分别确认相关条件并实操。

共享修改方案时列出文字用途、前景、背景、透明度及前后比率，比只说变深更清楚。颜色转换可统一 RGB/HSL 表示，但转换本身不会改善阅读，应区分格式转换与实际改色。

最后回到实际页面，从阅读修改后的说明到完成操作走一遍。用数值找问题，再用实画面确认阅读与操作。改好一组后，再查看复用同色的状态和主题，避免局部修好却遗漏别处。

白底正文可读不涵盖选中卡片、悬停链接或红色错误。应取文字与其正后方实际表面，包含透明叠层；半透明面可能使页面底色不是正确比较对象。逐状态统一前景、背景、透明度，才能找到要修的组合。

修正可改背景、去透明、把重要小字升为正文，不只加深文字。但应按实际字号字重选择标准，不为通过而改称大字。#777777 白底说明显示四舍五入接近 4.5 不足以判断边界，应看实际判定。

比率改善后回实际画面看，图片背景各处不同，细字小字仍可能难读。错误仅用红色表达也不够，应加文字或图标并检查焦点。对比度是重要检查之一，不是整个界面的自动评分。