Contrast Checker
Check the contrast ratio between two colors to ensure accessibility (WCAG AA/AAA) compliance. RGB values to HEX format for CSS and design.
Color Inputs
Example Text
This is how your colors look together
Small text (14px) • Large text (18px bold)
Contrast Results
No results yet
Select colors and click "Check Contrast" to see results
About WCAG Contrast Requirements
- • WCAG AA: Minimum contrast for legal compliance (4.5:1 normal, 3:1 large text)
- • WCAG AAA: Enhanced contrast for better accessibility (7:1 normal, 4.5:1 large text)
- • Large Text: Text that is at least 18pt (24px) or 14pt (18.66px) and bold
- • Normal Text: All other text smaller than large text threshold
About Contrast Checker
A comprehensive contrast checker tool that analyzes the color contrast ratio between foreground and background colors to ensure your designs meet WCAG (Web Content Accessibility Guidelines) compliance standards. This tool helps designers and developers create accessible interfaces by calculating precise contrast ratios and providing AA/AAA accessibility ratings.
Why use a Contrast Checker?
Web accessibility is crucial for creating inclusive digital experiences, and proper color contrast is a fundamental requirement. This tool eliminates guesswork by providing instant, accurate contrast ratio calculations and clear compliance indicators, helping you avoid accessibility violations and ensure your content is readable for users with visual impairments.
Who is it for?
Essential for web designers, UI/UX professionals, developers, and content creators who need to ensure their color choices meet accessibility standards. Perfect for anyone working on websites, mobile apps, or digital interfaces that must comply with WCAG guidelines for legal and usability requirements.
How to use the tool
Enter your foreground color using the color picker or by typing a hex, RGB, or HSL value
Select your background color using the same input methods
View the calculated contrast ratio and automatic WCAG AA/AAA compliance assessment
Adjust colors as needed to meet your desired accessibility level
Copy the final color values for use in your CSS or design files
Frequently Asked Questions
How do I check color contrast for accessibility?
Enter foreground and background colors (hex, RGB, or HSL). The tool calculates the WCAG contrast ratio and reports compliance: WCAG AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), UI components (3:1). Also shows a live preview of sample text. Runs entirely in your browser — color values never leave the device. Useful for: designing accessible UI, auditing existing designs, verifying brand colors meet legal accessibility requirements.
What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG 2.2, 2023) specify minimum contrast ratios between text and background for readability — especially for users with low vision. Contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05), where L is the relative luminance (perceptually weighted brightness, computed from RGB via the sRGB formula). Ratios range from 1:1 (no contrast) to 21:1 (black on white). WCAG defines thresholds based on text size and compliance level.
Is my data sent to a server?
No — contrast calculation runs entirely in your browser via JavaScript. The luminance formula and ratio calculation are deterministic math. Your color values never reach a server, never get logged. Verify in DevTools' Network tab: zero HTTP requests during checking. Safe for proprietary brand colors and unreleased design work.
What are the WCAG ratio thresholds exactly?
**WCAG 2.2 AA** (legal compliance baseline in most jurisdictions). Normal text: **4.5:1**. Large text (18pt+ or 14pt+ bold): **3:1**. UI components and graphical objects: **3:1**. **WCAG 2.2 AAA** (enhanced). Normal text: **7:1**. Large text: **4.5:1**. Use AA as the minimum target. AAA where possible — particularly for content that low-vision users will read extensively. WCAG 2.2 also introduces 'focus appearance' and 'target size' criteria — important for accessibility but not contrast-related.
Why is contrast based on luminance, not just lightness?
Human perception of brightness depends on color. Pure yellow (#FFFF00) appears bright; pure blue (#0000FF) appears dark — even though both have the same HSL Lightness (50% in some color models). The WCAG formula uses **relative luminance** — a perceptually-weighted sum: 0.2126R + 0.7152G + 0.0722B (after gamma correction). Green dominates (eye is most sensitive to green); blue contributes least. Result: green-on-white has lower contrast than expected; blue-on-white has higher contrast than its HSL lightness suggests. This perceptual model better predicts readability.
What about color blindness?
Contrast handles low-vision (overall brightness perception). Color blindness is a separate concern — users who can't distinguish certain hue pairs (red-green for ~8% of men). High contrast helps regardless. For color-blindness-specific testing, use [Color Blindness Simulator](/tools/color-blindness-simulator/). Best practice: never rely on color alone to convey information (add icons, labels, patterns). Test critical UI flows in monochrome (or grayscale your design) — if the information still reads, it works for color-blind users too.
Do I need 7:1 (AAA) or is 4.5:1 (AA) enough?
Depends on context. **AA (4.5:1)** is the legal baseline in most jurisdictions (US ADA Title III, EU EN 301 549, UK Equality Act, Canada AODA). Sufficient for most web content. **AAA (7:1)** is recommended for content read at length by users with vision impairments — government services, healthcare, financial services often target AAA. For typical commercial sites, AA is the practical target. For brand colors that don't meet AA, redesign the brand colors — accessibility isn't optional for compliance with most modern jurisdictions.
Can I use opacity / transparency colors?
Yes — but contrast checking with transparency requires knowing the underlying background. The 'effective' color is the alpha-blended result. The tool's basic mode assumes opaque colors. For transparent overlays, calculate the effective color first (blend rgba(0,0,0,0.5) over the background) and check the result. Best practice: for accessibility-critical text, use fully opaque colors so the contrast doesn't shift unexpectedly when content beneath changes.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.