Contrast Checker
Check WCAG AA/AAA contrast ratios for text colors.
Contrast Checker measures WCAG 2.x contrast ratios between foreground and background colors and reports AA/AAA pass or fail for normal and large text. Design accessible UI palettes entirely in your browser—no uploads.
How it works
Enter two HEX colors. The tool computes relative luminance for each, derives the contrast ratio, and compares it against WCAG AA (4.5:1 normal / 3:1 large) and AAA (7:1 / 4.5:1) thresholds with a live preview.
Benefits
- WCAG AA and AAA checks in one place
- Live sample text on your chosen colors
- Clear pass/fail messaging for normal and large text
- Fully local—palette experiments stay on your device
Use cases
- Validate button and body text colors before shipping
- Audit dark-mode surfaces against light text
- Compare brand accents on white and charcoal backgrounds
- Teach accessibility thresholds in design critiques
Best practices
- Prefer AA for body text; aim for AAA on long-form reading UIs
- Test both light and dark theme pairs
- Recheck after marketing tweaks brand hex values
- Do not rely on contrast alone—also verify focus states
Common mistakes
- Checking only large headings and ignoring body text requirements
- Using low-contrast placeholders that never get replaced
- Assuming brand colors automatically meet AA
- Forgetting disabled states often need separate treatment
Privacy
Color values are evaluated locally. ToolHub does not receive your palette unless you enable on-device history.
Frequently asked questions
- What contrast ratio does WCAG AA require?
- Normal text needs at least 4.5:1. Large text (typically 18pt regular or 14pt bold and above) needs at least 3:1 under WCAG 2.x AA.
- How is AAA different from AA?
- AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Use it when you want extra readability margin.
- Does Contrast Checker upload my colors?
- No. Ratios are computed in your browser from the HEX values you enter.
- Can I paste #rgb shorthand?
- Yes. Three-digit HEX values expand to six digits (for example #abc becomes #aabbcc) before measuring.
- Does a passing ratio guarantee accessibility?
- Contrast is necessary but not sufficient. Also check focus indicators, color-blindness robustness, and non-text UI components.
Related tools
Color Converter
color
Convert HEX, RGB, and HSL locally with a live swatch.
- hex
- rgb
- hsl
- color
Palette Generator
color
Generate complementary, analogous, and triadic palettes from a base HEX.
- color
- palette
- design
Color Mixer
color
Blend two HEX colors with a mix ratio.
- color
- palette
- design
Color Picker
color
Sample image colors and copy hex/rgb locally.
- color
- picker
- palette
- hex
Complementary Color Finder
color
Find complementary and split-complementary colors.
- color
- palette
- design
CSS Color Name Converter
color
Map CSS color names to HEX and back.
- color
- palette
- design