在视觉上对相关内容进行分组的边框是否有对比度要求？

我找不到“松散相关”或可视分组为“卡片”的内容边界的现有可访问性要求。有吗？

对于真正失明的用户，卡片周围的边界不需要有边界，但我认为，对于有轻微视觉障碍的用户或有认知障碍的用户，如果他们能看到卡片周围的边缘，内容可能更容易理解？

手风琴怎么样他们通常在标题周围有“装饰性”边框，甚至认为这是不需要的，因此可能不需要坚持最小的对比色？

在这些情况下，边框是装饰性的还是有意义的/信息性的？

我对以下情况进行了编码：一个信息页面显示了包含标题/咏叹调标签的卡片，以及一段说明用户将导航到哪里的段落，但所有卡片都有1像素的浅灰色边框（边框不符合对比度要求）。这是否足以满足AA级要求？

此处为Codepen.io/jirosworld/pen/XWBwbXK

HTML格式：

<main class="container">
  <div class="grid">
    <div class="grid__main">
      <h1 class="h1">Government support </h1>
      <div class="card-container card-container--small">
        <div class="card">
          <div class="card__body">
            <h2 class="h2">
              <a href="#" class="link" aria-label="energy-allowance" title="energy-allowance">
                <span class="link__text">Energy allowance</span>
              </a>
            </h2>
            <p class="p">Energy prices have risen sharply. Many households find it difficult to pay the bill. The municipality compensates low-income households. The government makes extra money available for this</p>
            <a href="#" class="button button--icon button--transparent" aria-label="energy-allowance" title="energy-allowance">
              <span aria-hidden="true" class="material-icons ">&rarr;</span>
            </a>
          </div>
        </div>
        <div class="card">
          <div class="card__body">
            <h2 class="h2">
              <a href="#" class="link" aria-label="Form House" title="Form House">
                <span class="link__text">Help with forms</span>
              </a>
            </h2>
            <p class="p">Do you have questions about administration, forms, laws and regulations or finances? Come visit our "Form House"</p>
            <a href="#" class="button button--icon button--transparent" aria-label="Form House" title="Form House">
              <span aria-hidden="true" class="material-icons ">&rarr;</span>
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
</main>
<p class="default-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at magna eu velit iaculis tempor sit amet at enim.</p>

CSS：

body {
  padding: 1em;
  font-family: sans-serif;
  color: #4b4b4b;
}
a:link {
  display:block;
  color: #4b4b4b;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.button {
  color: rgb(0,166,199);
  text-align: right;
  font-size:2em;
}
a:hover.button {
  padding-top: 2px;
  text-decoration: none;
}
h2 {
  font-size: 20px;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-width);
  position: relative;
  width: 100%;
}
.card-container {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2,1fr);
}

element.style {
}

.card {
  background-color: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  padding: 16px;
  margin-bottom: 1em;
}

.default-content {
  max-width: 900px;
}