/** * Accessibility Color Presets — Senastra Design System * ===================================================== * 色覚多様性対応の代替カラープリセット。 * data-a11y 属性で切り替え。 * * 使い方: * * * 読み込み順: design-tokens.css → design-tokens-extended.css → themes.css の後。 * * 対象トークン: 危険色（success / error / warning / info と subtle）のみ。 * テーマの装飾色（accent, bg, surface 等）は原則として上書きしない。 * high-contrast のみ境界・フォーカスを強調するため border / state-focus を追加。 */ /* ── P型 (Protanopia) / D型 (Deuteranopia) ── */ /* 赤緑が区別しにくいため、青 / 橙 / 黄 / 紫系に差し替え */ [data-a11y="protanopia"], [data-a11y="deuteranopia"] { --color-success: #3B82F6; --color-success-subtle: #DBEAFE; --color-error: #F97316; --color-error-subtle: #FFF7ED; --color-warning: #EAB308; --color-warning-subtle: #FEFCE8; --color-info: #8B5CF6; --color-info-subtle: #F5F3FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-a11y="protanopia"], :root:not([data-theme="light"])[data-a11y="deuteranopia"] { --color-success: #60A5FA; --color-success-subtle: #1E3A5F; --color-error: #FB923C; --color-error-subtle: #431407; --color-warning: #FACC15; --color-warning-subtle: #422006; --color-info: #A78BFA; --color-info-subtle: #2E1065; } } [data-theme="dark"][data-a11y="protanopia"], [data-theme="dark"][data-a11y="deuteranopia"] { --color-success: #60A5FA; --color-success-subtle: #1E3A5F; --color-error: #FB923C; --color-error-subtle: #431407; --color-warning: #FACC15; --color-warning-subtle: #422006; --color-info: #A78BFA; --color-info-subtle: #2E1065; } /* ── T型 (Tritanopia) ── */ /* 青黄が区別しにくいため、緑 / 赤 / 橙 / 紫寄りに差し替え */ [data-a11y="tritanopia"] { --color-success: #22C55E; --color-success-subtle: #DCFCE7; --color-error: #EF4444; --color-error-subtle: #FEF2F2; --color-warning: #F97316; --color-warning-subtle: #FFF7ED; --color-info: #6366F1; --color-info-subtle: #EEF2FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-a11y="tritanopia"] { --color-success: #4ADE80; --color-success-subtle: #14532D; --color-error: #F87171; --color-error-subtle: #450A0A; --color-warning: #FB923C; --color-warning-subtle: #431407; --color-info: #818CF8; --color-info-subtle: #1E1B4B; } } [data-theme="dark"][data-a11y="tritanopia"] { --color-success: #4ADE80; --color-success-subtle: #14532D; --color-error: #F87171; --color-error-subtle: #450A0A; --color-warning: #FB923C; --color-warning-subtle: #431407; --color-info: #818CF8; --color-info-subtle: #1E1B4B; } /* ── ハイコントラスト ── */ [data-a11y="high-contrast"] { --color-success: #00CC44; --color-success-subtle: #002200; --color-error: #FF2222; --color-error-subtle: #330000; --color-warning: #FFCC00; --color-warning-subtle: #332200; --color-info: #0088FF; --color-info-subtle: #001133; --color-border: #888888; --color-border-strong: #CCCCCC; --state-focus-ring-width: 3px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-a11y="high-contrast"] { --color-success: #00FF55; --color-success-subtle: #003311; --color-error: #FF4444; --color-error-subtle: #330000; --color-warning: #FFE033; --color-warning-subtle: #332200; --color-info: #33AAFF; --color-info-subtle: #001A33; --color-border: #AAAAAA; --color-border-strong: #EEEEEE; --state-focus-ring-width: 3px; } } [data-theme="dark"][data-a11y="high-contrast"] { --color-success: #00FF55; --color-success-subtle: #003311; --color-error: #FF4444; --color-error-subtle: #330000; --color-warning: #FFE033; --color-warning-subtle: #332200; --color-info: #33AAFF; --color-info-subtle: #001A33; --color-border: #AAAAAA; --color-border-strong: #EEEEEE; --state-focus-ring-width: 3px; }