Contrast Checker
Check contrast ratio and WCAG levels
Start
Contrast: 21.00:1
WCAG AA: Pass (normal), AA Large: Pass
WCAG AAA: Pass (normal), AAA Large: Pass
Description
Evaluate foreground/background color contrast and see WCAG AA/AAA pass/fail results.
Use it to verify buttons, text, and UI elements meet accessibility guidelines.
Key features
- Computes contrast ratio using relative luminance
- Shows AA/AAA for normal and large text
- Copy results for documentation
Related tools
How to Use
- Enter foreground and background hex colors.
- Click “Copy Output” to copy the ratio and pass/fail states.
- Use “Sample” to load demo combinations.
Example
Example
#000000 on #ffffff → 21.00:1 (AA/AAA pass)
FAQ
Large text threshold?
WCAG defines ≥14pt bold or ≥18pt normal as large.
Why fail on colors I like?
Adjust lightness/chroma to improve ratio while keeping hue.