深色パネル

色 ／ パターン集トップ

章の締めや料金面。地色を変え、文字は薄い面で4.5:1

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="dark-panel" aria-labelledby="dark-panel-title">
  <div class="dark-panel__inner page">
    <h2 id="dark-panel-title">料金</h2>
    <p class="dark-panel__lead"><span>初回相談は無料。</span><span>見積もり後に着手します。</span></p>
    <dl class="dark-panel__dl">
      <div><dt>小規模LP</dt><dd>110,000円〜</dd></div>
      <div><dt>更新・改善</dt><dd>22,000円〜</dd></div>
    </dl>
  </div>
</section>

.dark-panel {
  background: var(--color-text);
  color: var(--color-bg);
  padding-block: var(--space-8);
}
.dark-panel h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-bg);
}
.dark-panel__lead {
  margin: 0 0 var(--space-5);
  color: color-mix(in srgb, var(--color-bg) 82%, transparent);
}
/* 折り返しは版面の幅で決まる。文には折ってよい位置だけを持たせる */
.dark-panel__lead span {
  display: inline-block;
}
.dark-panel__dl {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  max-inline-size: 24rem;
}
.dark-panel__dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: 1px solid color-mix(in srgb, var(--color-bg) 25%, transparent);
}
.dark-panel__dl dt {
  margin: 0;
  font-weight: 400;
}
.dark-panel__dl dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-bg);
}

確認する#

• 補助文も4.5:1以上（opacity 頼みにしない）
• ページ全体を暗くせず1章だけ
• prefers-color-scheme とは別に役割で色を持つ

関連#

• 役割で色を持つ
• コントラストと色覚
• 出発点のCSS