# 実験素材：AIに画面を見せて直させる（コントラスト違反の測定）

記事：`/ja/blog/playwright-visual-accessibility-testing`（2026-10-18）

## 何をしたか

1. Claude Code（`claude -p`、Sonnet 5.5）に、架空の店4つ（`briefs.json`）のランディングページを3本ずつ、計12本作らせた（`gen.sh`、`pages/base/`）。依頼文に配色の指定は入れていない。
2. 12本すべてに、axe-coreのcolor-contrast違反があった（1〜14要素）。
3. 同じ12本を、直し方だけ変えて直させた（`fix.sh`、`prompts.txt`）。直し方は N / V / W / R / A / L の6通り。N と V は2回ずつ。
4. 直した後のHTMLを `measure.mjs` で測った（`results.csv`）。

| 記号 | 直し方 |
|---|---|
| N | 撮影なし。コードを読み直して直す |
| V | `shot.mjs` で画面を撮り、画像を見て直す |
| W | V + 「文字が読みにくいところがないかも見て」 |
| R | V + 「コントラストはWCAG AA（4.5:1、大きな文字は3:1）を満たす」 |
| A | `capture.mjs` で画像とaxeのJSONを出し、両方見て直す |
| L | A + 「違反が0になるまで繰り返す」 |

`pages/` は、最初のページ（`base/`）と、条件別の直した後のHTML（`N/`, `N2/`（Nの2回目）, `V/`, `V2/`, `W/`, `R/`, `A/`, `L/`）。`pages/blind/index.html` は、axeが「判定不能」にする背景の例（記事の表）。

## 測り方

- `measure.mjs`：幅390と1440で、axe-core 4.14.0（`@axe-core/playwright` 4.14.0、Playwright 1.64.1）を `wcag2a/2aa/21a/21aa/22aa` タグで実行する。`results.csv` の `contrast_*` はcolor-contrastの違反要素数。記事の数字は幅390と1440の多いほう。
- `incomplete_*` は「判定不能」の要素数。違反ではないので、違反数には入らない。
- `text_len_ratio_1440` は、文字を消して「直した」ことにしていないかの確認。最小は0.99。
- 1条件1回ずつ（NとVは2回）。12ページの合計で比べている。統計的な検定はしていない。

## 再現するとき

```bash
mkdir ui-check && cd ui-check
npm init -y && npm i -D playwright @axe-core/playwright && npx playwright install chromium
node capture.mjs ./index.html shots   # shots/ に画像とJSON
```

`fix.sh` と `gen.sh` は、実験時の絶対パス（`/tmp/pva/...`）を含む。自分の環境のパスに置き換えること。

## 注意

- 1本の試作ページ（同じ依頼）は違反0で、検証セットに入れていない。ふつうに作らせたページ13本のうち12本に違反があった、というのが正確な数字。
- `claude -p` の実行は `--permission-mode bypassPermissions` で、作業フォルダは条件ごとに分けた。ログで、他条件のフォルダを読んだ形跡がないことを確認した。
- 結果は、この4つの店と、この依頼文と、Sonnet 5.5での値。ほかのモデルや実サイトで同じとは限らない。