视觉分组内容边框是否有对比度要求？WCAG AA合规咨询

核心问题解答 #

1. 卡片/视觉分组边框有没有强制无障碍要求？ #

WCAG（Web内容无障碍指南）里没有专门针对卡片边框的强制条款，但它的「感知性」原则要求信息能被所有用户获取。

完全失明用户依赖屏幕阅读器的语义结构（比如你的卡片通过标题层级、容器结构就能被识别分组），边框对他们没用；但轻度视障、认知障碍用户确实能通过清晰边框快速识别内容块，这属于「最佳实践」而非硬性要求。

2. 手风琴标题的装饰边框要不要遵循对比度标准？ #

判断标准是：边框是否传递功能/状态信息：

• 纯装饰用途（比如仅美化，和手风琴展开/收起状态无关）：不需要满足对比度要求；
• 用于区分状态（比如展开时边框变色/加粗）：属于信息性元素，必须符合WCAG AA级的3:1对比度要求。

3. 你的案例是否符合WCAG AA级？ #

你的卡片边框（#d2d2d2和白色背景对比度约1.4:1）不满足3:1，但不违反AA级要求：

• 这个边框是装饰性的——核心内容的分组已经通过标题层级（<h2>）、布局间距、语义容器实现，屏幕阅读器用户能正常感知；
• 核心文本、链接的对比度都达标（文本#4b4b4b和白背景对比度约12:1，远高于4.5:1）。

当然，从用户体验角度，建议把边框颜色调整为#999（和白背景对比度约4.7:1），这样能更好地服务轻度视障用户。

代码优化建议 #

HTML：强化卡片语义 #

给卡片添加区域角色和关联标题，让屏幕阅读器更清晰识别分组：

<div class="card" role="region" aria-labelledby="energy-title">
  <div class="card__body">
    <h2 class="h2" id="energy-title">
      <a href="#" class="link" aria-label="energy-allowance" title="energy-allowance">
        <span class="link__text">Energy allowance</span>
      </a>
    </h2>
    <!-- 其他内容 -->
  </div>
</div>

CSS：提升边框对比度 #

.card {
  background-color: #fff;
  border: 1px solid #999; /* 替换原#d2d2d2，提升对比度至AA级标准 */
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 16px;
  margin-bottom: 1em;
}

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