---
title: "コントラスト比とは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "HTMLのコントラスト比をはじめて確認するデザイナーやAI生成サイト制作者に向け、基準値の読み方・確認ツール・共有前の修正判断まで実践的に解説した記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-color-contrast-html-share"
markdown: "https://giga-site.com/articles/what-is-color-contrast-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# コントラスト比とは？HTML共有・AI生成サイトでの意味をやさしく解説

文字が読めるか読めないかを数値で示す指標がコントラスト比です。AI生成サイトのカラーパレットはデザイン的に洗練されていても、薄い文字色と白背景の組み合わせでWCAGの基準を下回ることが少なくありません。プレビューURLを送る前に知っておきたい基礎を整理します。

> Source HTML: https://giga-site.com/articles/what-is-color-contrast-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

コントラスト比とは、前景色（文字色）と背景色の輝度差を1:1〜21:1の数値で表したものです。WCAG 2.1レベルAAでは通常テキストが4.5:1以上、18pt以上または14pt以上の太字では3:1以上が必要とされています。数値が高いほど読みやすい組み合わせです。

具体例として、黒文字（#000000）と白背景（#FFFFFF）は21:1で最大値です。一方、AIが好んで使うライトグレーのボディテキスト（例：#767676）と白背景の組み合わせは4.48:1となり、AAをギリギリ下回ります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

ライトモードのデザインでは問題なく見えても、屋外のスマートフォン画面ではコントラストが足りずに文字が見えづらくなります。プレビューURLを受け取った相手が屋外や明るい照明下で確認している場合、「文字が見えない」という感想が返ってくることがあります。

官公庁・医療機関・教育機関向けにAI生成HTMLを共有する場合、アクセシビリティ調達基準においてコントラスト比が定量的に評価されることがあります。提出前にスキャンツールでコントラストエラーを0件にしておかないと、差し戻しが発生するリスクがあります。

## よくある誤解

「デザインツールで見たときは問題なかった」という声がありますが、FigmaやXDのプレビューはディスプレイのキャリブレーションに依存します。実際のWebブラウザ上では色の見え方が異なる場合があり、ブラウザで計測したコントラスト比が正確な値です。

「コントラストが低くてもユーザーはフォントサイズを拡大できる」は誤りです。フォントサイズを拡大しても輝度差は変わりません。コントラスト比はフォントサイズとは独立した特性であり、拡大表示では解決できない問題です。

## 安全に使うための注意点

Chrome DevToolsのElements→Accessibilityパネルでテキスト要素を選択すると、自動でコントラスト比が表示されます。赤いアイコンが付いていればWCAGの基準を下回っている証拠です。代替の色候補も提案してくれるため、その場でCSSを修正してから共有するとスムーズです。

プレースホルダーテキスト（inputのplaceholder）はデフォルトで薄い色が設定されており、多くのAI生成フォームでコントラスト不足になります。CSSで`::placeholder { color: #767676; }`などと明示的に上書きするか、さらに濃い色に変更することで基準を満たせます。

## よくある質問

### グラデーション背景の上にあるテキストのコントラスト比はどう評価されますか？

グラデーションは位置によって背景色が変わるため、最も薄い部分での比率で評価するのが安全です。WebAIM Contrast Checkerで最も条件の悪い組み合わせを入力し、基準を下回らないことを確認してください。グラデーション部分にテキストを重ねるデザインは原則として避けることを推奨します。

### アイコンや装飾的な画像もコントラスト比の対象になりますか？

WCAG 2.1では情報を伝えるアイコン（操作目的を示すもの等）はUIコンポーネントとして3:1以上が必要です。一方、純粋に装飾目的の画像はコントラスト基準の対象外です。意味を持つアイコンはそれ自体の色と背景のコントラストを確認してください。

### ダークモード対応のHTMLで、ライトとダークどちらのコントラストを確認すれば十分ですか？

両方確認する必要があります。ライトモードで4.5:1をクリアしていても、ダークモードでは同じCSSが別の背景色に当たりコントラストが逆転する場合があります。prefers-color-schemeのメディアクエリで切り替えている場合、両方のシートを別々にスキャンしてください。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "コントラスト比とは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "HTMLのコントラスト比をはじめて確認するデザイナーやAI生成サイト制作者に向け、基準値の読み方・確認ツール・共有前の修正判断まで実践的に解説した記事です。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-color-contrast-html-share",
  "url": "https://giga-site.com/articles/what-is-color-contrast-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "グラデーション背景の上にあるテキストのコントラスト比はどう評価されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "グラデーションは位置によって背景色が変わるため、最も薄い部分での比率で評価するのが安全です。WebAIM Contrast Checkerで最も条件の悪い組み合わせを入力し、基準を下回らないことを確認してください。グラデーション部分にテキストを重ねるデザインは原則として避けることを推奨します。"
      }
    },
    {
      "@type": "Question",
      "name": "アイコンや装飾的な画像もコントラスト比の対象になりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "WCAG 2.1では情報を伝えるアイコン（操作目的を示すもの等）はUIコンポーネントとして3:1以上が必要です。一方、純粋に装飾目的の画像はコントラスト基準の対象外です。意味を持つアイコンはそれ自体の色と背景のコントラストを確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "ダークモード対応のHTMLで、ライトとダークどちらのコントラストを確認すれば十分ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "両方確認する必要があります。ライトモードで4.5:1をクリアしていても、ダークモードでは同じCSSが別の背景色に当たりコントラストが逆転する場合があります。prefers-color-schemeのメディアクエリで切り替えている場合、両方のシートを別々にスキャンしてください。"
      }
    }
  ]
}
```