Real-Time Contrast Check
Instantly see your WCAG 2.1 contrast ratio as you type or adjust colors. No button clicks needed — live results update on every input.
Instantly check WCAG 2.1 AA & AAA contrast ratios, simulate color blindness, get smart color suggestions, and ensure your designs are fully accessible.
🎯 Live Tool
Enter your foreground and background colors below to instantly calculate WCAG 2.1 contrast ratios and accessibility compliance scores.
Normal text preview — this is what body copy looks like with your chosen color combination. Ensure adequate contrast for readability.
Small text / caption sampleSimulated how your palette appears under common vision conditions.
Luminance values will appear here.
✨ Features
A comprehensive suite of color accessibility tools built for designers, developers, and accessibility advocates.
Instantly see your WCAG 2.1 contrast ratio as you type or adjust colors. No button clicks needed — live results update on every input.
Full compliance checking for both Level AA and AAA standards — covering normal text, large text, and UI component contrast requirements.
Preview your color pairs through 6 types of color vision deficiency — Protanopia, Deuteranopia, Tritanopia, and more — instantly.
When your colors fail, our tool automatically suggests nearby accessible alternatives that maintain your brand hue while meeting WCAG.
Enter colors in HEX, RGB, or HSL format. All formats sync seamlessly with the live color picker for maximum flexibility.
Copy your contrast results, color values, or accessibility report to your clipboard instantly for use in design specs or documentation.
Instantly swap foreground and background colors to explore inverted combinations. Alpha transparency support included.
Browse curated accessible color pairs — dark themes, light themes, brand colors — to jumpstart your accessible design system.
📖 Guide
Get your contrast ratio in seconds — no sign-up, no complexity, just results.
Use the color pickers or type your HEX, RGB, or HSL values into the foreground (text) and background fields. Colors update in real time.
Instantly see your contrast ratio score and WCAG AA/AAA pass or fail status for both normal and large text across all compliance levels.
Use our smart suggestions, swap colors, or tweak opacity until you achieve full WCAG compliance. Then copy the result for your workflow.
Color contrast is the measurable difference in luminance — or perceived brightness — between two colors placed together, most commonly the text color (foreground) and the surface behind it (background). When contrast is insufficient, text becomes difficult or impossible to read, particularly for users with low vision, age-related visual decline, or color vision deficiencies affecting an estimated 300 million people worldwide. In brightly lit environments or on lower-quality screens, even users with perfect vision struggle with poor color choices. Good contrast is not a design afterthought; it is a foundational pillar of inclusive, professional design.
The Web Content Accessibility Guidelines (WCAG), published by the W3C, define clear numerical standards for contrast ratios. A ratio of 1:1 means two identical colors — no contrast at all — while 21:1 represents the maximum, such as pure black text on a pure white background. For WCAG Level AA compliance, normal body text requires a minimum ratio of 4.5:1, while large text (defined as 18pt or 14pt bold, approximately 24px or 19px bold) needs at least 3:1. The more stringent WCAG Level AAA standard raises those thresholds to 7:1 for normal text and 4.5:1 for large text — a level of contrast most accessibility experts recommend for critical interfaces like healthcare, government, and finance portals.
Contrast ratio uses relative luminance — a perceptually weighted measure of light output for a given color based on the sRGB color space. Each color channel (red, green, blue) is converted from its 8-bit value into a linear light value, then combined using coefficients that reflect human visual sensitivity: green is weighted most heavily at ~0.7152, red at ~0.2126, and blue least at ~0.0722. The contrast ratio is then calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the higher luminance value and L2 the lower. This formula ensures consistent, mathematically grounded results regardless of the display technology or color profile used.
Not all color combinations pose equal risks. Warm hues like red and orange on white backgrounds often seem vivid yet fail contrast tests because their luminance values are surprisingly close. Analogous palettes — colors adjacent on the color wheel, such as blue-green on green — are notoriously problematic for color-blind users even when the WCAG ratio passes, because the hue distinction disappears entirely. Cool blues and purples frequently underperform on dark backgrounds. Neon or fluorescent colors may appear vibrant on screen but can cause visual fatigue over extended reading sessions. Our tool simulates these edge cases and color vision types together so you can catch issues across all user groups.
color: #999 on white backgrounds (only ~1.9:1).WCAG 2.2, the most recent update to the guidelines, introduced additional criteria around focus indicators and target sizes but retained the same contrast thresholds. Looking ahead, WCAG 3.0 proposes an updated model called APCA (Advanced Perceptual Contrast Algorithm) that accounts for font weight, pixel rendering, and spatial frequency — factors the current relative luminance formula ignores. While APCA is not yet a formal requirement, forward-thinking designers and developers are encouraged to use both the current WCAG formula and APCA scores in parallel to future-proof their work. Our Color Contrast Checker currently implements the WCAG 2.1 standard and will be updated as official guidance evolves.
❓ FAQ
Discover our full suite of free tools — from color generators to 100+ AI-powered productivity tools, all in one place.