Color Contrast Checker
Calculate the WCAG 2.1 contrast ratio between a foreground and background color and check AA / AAA accessibility compliance.
Category: Dev Tools
When to use?
Verify that text and background color combinations in your web or app design meet WCAG accessibility standards before shipping.
How to use
- Pick a foreground (text) color and a background color using the color pickers or hex inputs.
- The contrast ratio is calculated instantly and shown with a live preview.
- Check the pass / fail badges for Normal Text, Large Text, and UI Components.
Input Explanation
Enter hex color codes (#RRGGBB) or use the color pickers. Click ⇆ to swap foreground and background.
FAQ
What is the difference between AA and AAA?
WCAG 2.1: Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (≥18px, or bold ≥14px) needs 3:1 for AA and 4.5:1 for AAA.
What contrast does a UI component need?
Non-text UI components such as button borders and icons require a minimum contrast ratio of 3:1 against adjacent colors under WCAG 2.1.
Related Tools
- JSON Formatter - Beautify or minify JSON strings instantly and check for validity errors.
- UUID Generator - Generate up to 20 cryptographically secure UUID v4 values at once.
- Password Generator - Generate secure random passwords in the browser by choosing length, character set, and count.
- JWT Decoder - Decode a JWT header and payload to view the JSON and key claims.
- Regex Tester - Enter a regex pattern to see matches in text in real time.
- QR Code Generator - Convert text or a URL into a QR code and download it as an image.