Color Contrast Checker
Check WCAG 2.1 contrast ratios between two colors. Ensure your text meets AA and AAA accessibility standards with instant pass/fail results.
Discover More Free Tools
How to Use This Tool
- Pick a foreground (text) color and a background color using the color pickers or by typing hex codes.
- See the live preview of how your text looks on the background.
- Check the WCAG results: AA Normal (≥4.5:1), AA Large (≥3:1), AAA Normal (≥7:1), AAA Large (≥4.5:1).
- Adjust colors until all required levels pass.
Related Tools
Color Converter
Convert colors between HEX, RGB, HSL, and HSV formats. Adjust with sliders and see a live color preview. Copy CSS-ready values. Pick from a color wheel or paste any valid color.
CSS Minifier
Minify CSS by stripping whitespace, comments, and unnecessary characters. Also beautifies minified CSS back to readable format. Paste your stylesheet and toggle between compact and readable.
HTML Entity Encoder
Encode special HTML characters to entities and decode entities back to plain text. Covers all named entities plus numeric codes. Paste raw HTML to escape it for safe embedding.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. AA Normal requires 4.5:1 for body text. AA Large requires 3:1 for text larger than 18px or bold 14px. AAA levels are stricter.
What is a good contrast ratio?
For normal body text, aim for at least 4.5:1 (AA). For large text or headings, 3:1 (AA Large) is acceptable. For the best accessibility, target 7:1 (AAA).
Does this tool work with hex codes?
Yes. You can type any 6-digit hex code (like #3B82F6) or use the native color picker. Both inputs are synchronized.
Is my color data sent anywhere?
No. All calculations happen in your browser. No data is sent to any server.