Barokit

🎯WCAGカラーコントラストチェック

文字色・背景色のコントラスト比を計算しWCAG AA/AAA合格を判定。デザインアクセシビリティ監査に。

🔒 ブラウザ内処理ウォーターマークなし登録不要

使い方

  1. 1文字色・背景色を選択します。
  2. 2コントラスト比と合格基準が即座に表示されます。

よくある質問

基準は何ですか?+

WCAG 2.1で通常テキストはAA 4.5:1、AAA 7:1です。大きいテキスト(18pt以上)はAA 3:1、AAA 4.5:1です。

AAとAAAの違いは?+

AAは標準推奨、AAAはより厳格な基準です。政府・公的機関は通常AAを義務化しています。

なぜデザインで重要なのですか?+

視覚障害・老眼・色覚多様性・低照度環境(屋外日光下)での可読性を保証します。一般ユーザーにとっても読みやすい画面になります。

白背景に灰色文字はなぜ良くないのですか?+

デザイン的にはすっきり見えますが、コントラストが低く視覚弱者には読みづらいです。本文テキストは#767676以上のコントラストが必要です。

日本で法的義務はありますか?+

韓国の公的機関・政府サイトは『障害者差別禁止法』と『KS X 6385』基準でアクセシビリティ義務が適用されます。日本でも『情報アクセシビリティ自己評価様式』(JIS X 8341-3)に基づく対応が推奨されています。

色覚デザインも別途確認すべき?+

本ツールは明度コントラストのみを評価します。色覚シミュレーションが必要な場合は別ツールやデザイナーツール(Figmaプラグインなど)をご利用ください。

関連ツール