🎨 Color Contrast Checker
Check text and background color contrast for WCAG 2.1 compliance. Instantly see ratings, pass/fail status, and live preview.
Good contrast for small text (below 18pt) and great contrast for large text (above 18pt or bold above 14pt). Click to enhance
Oscar Levant
What is a Color Contrast Checker?
A Color Contrast Checker is a tool that helps you ensure your text and background color combinations meet WCAG 2.1 accessibility standards. It calculates the contrast ratio between two colors and determines if your design is accessible to users with visual impairments or color blindness.
Why is Contrast Important?
Poor color contrast can make text unreadable, especially for users with low vision. Ensuring sufficient contrast between text and background helps improve readability, user experience, and legal compliance for accessibility.
- Compliant with WCAG 2.1 standards (AA / AAA)
- Instant contrast score and rating
- Supports small text and large/bold text ratings
- Live preview to simulate real usage
How to Use This Tool
Simply enter a text color and a background color using HEX format. The tool will automatically calculate the contrast ratio and display a score with pass/fail indicators. You can adjust your colors live to reach an acceptable rating.
WCAG 2.1 Contrast Requirements
- AA for normal text: 4.5:1
- AA for large text: 3:1
- AAA for normal text: 7:1
- AAA for large text: 4.5:1
This tool is ideal for UI/UX designers, developers, and accessibility professionals who want to make their content inclusive and compliant. Start testing your color pairs now to improve your site’s readability and accessibility.