Color Contrast Checker
Check colour contrast ratios against WCAG AA and AAA accessibility standards. Live preview with foreground and background colour pickers. Free, no signup.
Loading tool...
How to Use Color Contrast Checker
- Pick a foreground (text) colour using the colour picker or type a hex value
- Pick a background colour using the second colour picker
- The contrast ratio is calculated automatically in real time
- Check the WCAG AA and AAA pass/fail results for normal and large text
- Use the Swap button to reverse foreground and background
- Click a preset from the Common Pairs section to test popular combinations
- Adjust colours until you reach the required contrast ratio
About Color Contrast Checker
The Color Contrast Checker calculates the contrast ratio between two colours and checks compliance against WCAG 2.1 AA and AAA accessibility standards. Enter foreground and background hex colours to instantly see pass/fail results for normal text, large text, and UI components. Includes a live text preview and common colour pair presets.
Common Use Cases
Frequently Asked Questions
What contrast ratio do I need to pass WCAG AA?
For normal text (under 18pt or 14pt bold): 4.5:1 minimum. For large text (18pt+ or 14pt+ bold) and UI components: 3:1 minimum. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What is the difference between WCAG AA and AAA?
AA is the standard compliance level required by most accessibility laws. AAA is the enhanced level with stricter thresholds — not required for all content but provides better accessibility for users with severe vision impairments.
How is contrast ratio calculated?
The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour, as defined in WCAG 2.1.
Does this tool check colour blindness?
This tool checks luminance-based contrast ratio as defined by WCAG. For colour blindness simulation (deuteranopia, protanopia, tritanopia), you would need a dedicated colour blindness simulator. However, meeting WCAG contrast ratios ensures readability for most users including those with low vision.
Related Tools
Color Picker
Pick colors and get HEX, RGB, and HSL values instantly. Convert between color formats. Free online color tool for designers and developers.
CSS Gradient Generator
Generate CSS gradients visually. Linear, radial, and conic types with live preview, colour stops, angle control, and instant CSS code output. Free, no signup.
Meta Tags Generator
Generate optimized meta tags for SEO, Open Graph, and Twitter Cards. Instant preview, copy-to-clipboard, and comprehensive social media optimization. 100% free tool.