デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。
様式名: スイス・ミニマル / フォーム
「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。
| 対象 | 文字色 | 背景 | 実効背景 | 比 | 判定 |
|---|---|---|---|---|---|
| ラベル（白地） | #1f2937 | #ffffff | #ffffff | 14.68:1 | AA 合格 |
| 入力文字（白地） | #111827 | #ffffff | #ffffff | 17.74:1 | AA 合格 |
| プレースホルダ（採用値・白地） | #6b7280 | #ffffff | #ffffff | 4.83:1 | AA 合格（余裕なし） |
| 入力枠の境界（採用値・非文字3:1基準） | #6b7280 | #ffffff | #ffffff | 4.83:1 | AA 合格 |
| フォーカス枠（非文字3:1基準） | #2563eb | #ffffff | #ffffff | 5.17:1 | AA 合格 |
| 壊れた例：薄いプレースホルダ | #9ca3af | #ffffff | #ffffff | 2.54:1 | 不合格 |
| 壊れた例：薄い入力枠（非文字） | #cbd5e1 | #ffffff | #ffffff | 1.48:1 | 不合格 |
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>アクセシブルなフォーム デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
--ink:#111827; --label:#1f2937; --ph:#6b7280;
--line:#6b7280; --focus:#2563eb; --err:#dc2626; --btn:#1f2937;
}
body{background:#fff;color:var(--ink);min-height:340px;padding:28px 30px;
font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
h3{font-size:17px;font-weight:700;margin-bottom:4px}
.lead{font-size:12px;color:var(--ph);margin-bottom:20px}
form{max-width:32em}
.field{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:600;color:var(--label);margin-bottom:6px}
.req{color:var(--err);margin-left:2px}
input,textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);
border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff}
input::placeholder,textarea::placeholder{color:var(--ph)}
textarea{min-height:64px;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;
border-color:var(--focus)}
.field.error input{border-color:var(--err);border-width:1.5px}
.err-msg{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--err);font-weight:600}
.err-msg svg{width:14px;height:14px;flex:none}
.hint{margin-top:6px;font-size:11px;color:var(--ph)}
.submit{margin-top:6px;background:var(--btn);color:#fff;border:0;font:inherit;font-size:14px;
font-weight:700;padding:12px 26px;border-radius:8px;cursor:pointer;min-height:44px}
.submit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
</style></head><body>
<h3>お問い合わせ</h3>
<p class="lead">2営業日以内にご返信します。</p>
<form onsubmit="return false">
<div class="field">
<label for="name">お名前<span class="req" aria-hidden="true">*</span></label>
<input id="name" type="text" required autocomplete="name" placeholder="例：伊藤 翔真">
</div>
<div class="field error">
<label for="mail">メールアドレス<span class="req" aria-hidden="true">*</span></label>
<input id="mail" type="email" required autocomplete="email" value="shoma@" aria-invalid="true" aria-describedby="mail-err">
<p class="err-msg" id="mail-err">
<svg viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 1 1 14h14L8 1zm0 5v4H7.9L8 6zm0 5.2a.9.9 0 100 1.8.9.9 0 000-1.8z"/></svg>
メールアドレスの形式が正しくありません（@の後を確認してください）
</p>
</div>
<div class="field">
<label for="msg">ご用件</label>
<textarea id="msg" placeholder="ご相談内容をご記入ください"></textarea>
<p class="hint">任意。分かる範囲で構いません。</p>
</div>
<button class="submit" type="submit">送信する</button>
</form>
</body></html>