カラーコントラスト チェッカー

アクセシビリティのためWCAG 2.1適合を確認

{{ __t('small_text') }}: The quick brown fox jumps over the lazy dog.

{{ __t('large_text') }}: The quick brown fox.

{{ ratio }}:1

{{ __t('contrast_ratio') }}

{{ passAAsmall ? '✓' : '✗' }}
AA Small (4.5:1)
{{ passAAlarge ? '✓' : '✗' }}
AA Large (3:1)
{{ passAAAsmall ? '✓' : '✗' }}
AAA Small (7:1)
{{ passAAAlarge ? '✓' : '✗' }}
AAA Large (4.5:1)

コントラスト確認の目的

男性の約8%、女性の約0.5%が何らかの色覚異常を持っています。コントラストが低いと、特に小さな文字や品質の悪いディスプレイ、視覚障害のあるユーザーにとってテキストが読みにくくなります。WCAG（Web Content Accessibility Guidelines）は多くの国で法的に求められる最低値を定めています（EU EN 301 549、米国ADA）。

WCAG 2.1の閾値

AAレベルは通常テキスト（24px未満、または18.66pxの太字未満）で4.5:1、大きなテキストで3:1が必要。AAAレベルは通常テキスト7:1、大きなテキスト4.5:1。UIコンポーネントとグラフィックには最低3:1。これらの値はWCAG式の相対輝度に基づき、色相は影響しません。