色コントラストチェッカー
WCAG準拠のための色コントラスト比をチェックします。色がアクセシビリティ基準を満たしていることを確認します。
色コントラストチェッカー
サンプルテキスト
これはコントラストをテストするためのサンプルテキストです
機能紹介
The Color Contrast Checker tool calculates contrast ratios between foreground and background colors and evaluates them against WCAG accessibility standards. It helps ensure your designs are readable for more users.
このツールを使うタイミング
Use this tool whenever you choose text and background colors for UI elements, especially for buttons, links, and body text.
使い方
Enter foreground and background colors
Provide colors in HEX, RGB, or other supported formats for text and its background.
Check contrast ratio
See the computed contrast ratio and whether it meets WCAG AA or AAA requirements for different text sizes.
Adjust colors if needed
Tweak either color until the ratio passes the desired accessibility level.
使用例
Validating a brand color palette
Ensure your chosen brand colors still provide enough contrast when used for body text on white or dark backgrounds.