Changing language starts a new session. Save your result first.
How to Use
- 1
Enter the foreground color
Pick or type your text color using the foreground color input.
- 2
Enter the background color
Pick or type your background color using the background color input.
- 3
Read the results
The tool instantly shows the ratio and WCAG AA/AAA pass/fail for all text sizes and UI components.
- 4
Apply a suggestion if failing
If the pair fails, click a suggested accessible alternative to apply it.
Want to learn more?
📖WCAG Color Contrast: What It Is, Why It Matters & How to Check It
Related Tools
Color Palette
Generate and manage color palettes with color theory and accessibility checks.
Try Color Palette →CSS Gradient Generator
Create beautiful CSS gradients with visual editor and export CSS.
Try CSS Gradient Generator →Color Converter
Convert between color formats including RGB, HEX, HSL, CMYK, and more. Professional color converter with color names, brightness analysis, and contrast ratios for designers and developers.
Try Color Converter →Frequently Asked Questions
- What contrast ratio is needed for WCAG AA?
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). UI components also need 3:1.
- What is the difference between WCAG AA and AAA?
- For text contrast, AAA increases the thresholds to 7:1 for normal text and 4.5:1 for large text. This tool checks color contrast, not legal compliance.
- How is the contrast ratio calculated?
- Using the WCAG relative luminance formula: L = 0.2126R + 0.7152G + 0.0722B, then ratio = (L1 + 0.05) / (L2 + 0.05).