コバルトブルー案
実際のシェーマ画像と座標表で描いています。タブと部位はどちらも押せます（JavaScript を使わない作りにしたので、どの環境でも動きます）。
タブで向きを変え、部位を押すと選択の色になります
使っている色
brand
#0047AB
コバルトブルー。選択中のタブ、主要ボタン
brandSoft
#DCE8F8
淡いコバルト。強調の下地
canvas
#EEF1F6
画面の地
surface
#FFFFFF
カードの地
surfaceSunken
#F2F5FA
一段沈んだ地。タブの受け皿
primaryText
#14213D
本文
secondaryText
#4A5875
補助文
line
#DCE3EE
境界線
painVerySevere
#A62A22
痛みの部位を選んだときの色
文字の読みやすさ
選択した部位のラベルは白文字です。肌色の上に合成した実際の地色に対して、白文字が何倍のコントラストになるかを測りました。小さい文字は 4.5 倍以上が推奨です。
| 配色 | 選択部位の実効の地色 | 白文字のコントラスト | 判定 |
|---|---|---|---|
| コバルトブルー案（本案） | #af3f35 | 5.86 倍 | 合格 |
| 移植元 iOS（差し戻し先） | #d7897e | 2.70 倍 | 不足 |
| いまの Android | #c85c4e | 4.12 倍 | 不足 |
移植元も現行 Android も推奨値に届いていません。コバルト案は色を濃く（#A62A22）、不透明度を 0.88 に上げてここを解消しています。