Color Contrast Checker
Check two opaque HEX colors against WCAG AA/AAA thresholds, preview text, and apply an available lightness adjustment.
Check two opaque HEX colors against WCAG AA/AAA thresholds, preview text, and apply an available lightness adjustment.
- Prepare your input
Choose the relevant options using the controls below.
- Run your task
Adjust the controls below and inspect the preview.
- Use the result
Check the result, then use the available copy or download controls.
Two opaque RGB hex colors. Ratios are rounded for display; thresholds use the full value. Text sizes are points. This is not a page accessibility audit.
Color Selection
Live Preview
WCAG AA
WCAG AAA
Color Information
Foreground
Background
Common Pairs
Safe Combinations (High Contrast)
Common Combinations
Color Contrast Checker
Compare a foreground and background color using the WCAG relative-luminance contrast ratio. Enter a 3- or 6-digit opaque RGB hex value, choose the preview text size and weight, then review the ratio and AA/AAA results for normal text, large text and UI components. Presets and lightness suggestions help you explore alternatives; Auto-fix adjusts the background when a nearby AA result is available.
This checker accepts opaque colors only and does not composite alpha or inspect a complete page. A passing pair is one color relationship at the chosen text setting, not a full accessibility audit. Check focus, non-text contrast, states and the actual background in your final interface separately.
Features
- Calculate a contrast ratio from two 3- or 6-digit opaque RGB hex colors.
- Show WCAG AA/AAA thresholds for normal text, large text and UI components.
- Preview custom text with selectable size and weight.
- Swap colors, inspect suggestions, apply an available AA adjustment and copy the pair.
How to use
- Enter the foreground and background as 3- or 6-digit hex colors.
- Choose the preview text size and weight, then read the ratio and threshold states.
- Use presets or suggestions to compare alternatives; Auto-fix only changes the background when a candidate exists.
- Copy the pair and verify the final component, focus state and background in your interface.