Color Contrast Ratio Calculator
Calculate the WCAG contrast ratio between any two colors online for free. Our color contrast ratio calculator checks WCAG 2.1 AA and AAA compliance for normal text, large text, and UI components - with a live preview and support for HEX, RGB, and HSL formats. No signup required.
Enter two colors in any format - HEX, RGB, HSL, or use the color picker - to instantly calculate the WCAG contrast ratio and accessibility compliance level. Results update in real time as you type. All calculations run locally in your browser.
rgb(0, 0, 0) · #000000
rgb(255, 255, 255) · #FFFFFF
The quick brown fox jumps over the lazy dog
Normal text preview - 16px regular weight
Small text preview - 12px
Why Use Our Color Contrast Ratio Calculator?
Instant Color Contrast Ratio Calculation
Calculate the WCAG contrast ratio between any two colors instantly as you type. Our color contrast ratio calculator updates in real time - no button press needed - so you can iterate on your palette without interruption.
Secure Color Contrast Calculator Online
All color contrast ratio calculations happen locally in your browser. Your color values never leave your device, ensuring 100% privacy when you use our color contrast ratio calculator online.
Color Contrast Ratio Calculator - No Installation
Use our color contrast ratio calculator directly in any browser with no downloads, plugins, or design software required. Check WCAG compliance from any device - desktop, tablet, or mobile - instantly.
Full WCAG 2.1 AA and AAA Compliance Check
Get instant pass/fail results for WCAG 2.1 AA and AAA levels across normal text, large text, and UI components. Includes a live text preview so you can see exactly how your color combination looks.
Common Use Cases for Color Contrast Ratio Calculator
Web Accessibility Compliance
Designers and developers use the color contrast ratio calculator to ensure their websites meet WCAG 2.1 AA requirements before launch. Catching contrast failures early prevents costly accessibility audits and legal compliance issues.
UI and Brand Color Selection
When building a design system or brand palette, check every foreground/background combination for WCAG compliance. Use the calculator to find the minimum shade of a brand color that passes AA contrast on white or dark backgrounds.
Button and CTA Design
Call-to-action buttons must meet the 3:1 contrast ratio for UI components under WCAG 2.1. Test your button text color against the button background to confirm compliance before shipping to production.
Dark Mode Color Palettes
Dark mode introduces new contrast challenges - colors that pass on light backgrounds often fail on dark ones. Use the color contrast ratio calculator to verify every text/background pair in both light and dark themes.
Form and Input Accessibility
Placeholder text, labels, helper text, and error messages all need sufficient contrast. Check each text element against its background to ensure users with low vision can read your forms without difficulty.
Data Visualisation and Charts
Chart labels, legend text, and data point annotations must be readable against chart backgrounds. Use the color contrast ratio calculator to verify that your data visualisation colors meet accessibility standards.
Understanding Color Contrast Ratio
What is Color Contrast Ratio?
The color contrast ratio is a numerical measure of the difference in perceived luminance between two colors - typically a foreground (text) color and a background color. It is defined by the Web Content Accessibility Guidelines (WCAG) and ranges from 1:1 (no contrast - identical colors) to 21:1 (maximum contrast - pure black on pure white). The contrast ratio is calculated using the relative luminance of each color, which accounts for the non-linear way the human eye perceives brightness. Our color contrast ratio calculator implements the exact WCAG 2.1 formula so you get the same result as any official accessibility audit tool.
How Our Color Contrast Ratio Calculator Works
- 1. Enter Your Colors: Type any color in HEX (#rrggbb), RGB (rgb(r,g,b)), or HSL (hsl(h,s%,l%)) format into the foreground and background fields, or click the color swatch to open the native color picker. The calculator accepts shorthand HEX (#rgb) and alpha variants too. All processing happens locally in your browser - your colors never leave your device.
- 2. Instant Real-Time Calculation: The contrast ratio updates instantly as you type - no button press required. The calculator converts each color to its relative luminance using the WCAG sRGB linearisation formula, then computes the ratio as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 is the darker.
- 3. Review WCAG Compliance: The results panel shows pass/fail status for WCAG 2.1 AA and AAA across three contexts: normal text, large text, and UI components. A live text preview lets you see exactly how the color combination looks at different text sizes.
WCAG Contrast Requirements Explained
- AA - Normal Text (4.5:1): The minimum contrast ratio for body text, labels, and any text smaller than 18pt (or 14pt bold). This is the standard requirement for WCAG 2.1 Level AA compliance, which is the legal baseline in most jurisdictions.
- AA - Large Text (3:1): Large text is defined as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger. Large text requires a lower minimum contrast ratio because it is easier to read at lower contrast.
- AA - UI Components (3:1): Graphical objects and user interface components such as form inputs, buttons, focus indicators, and icons must have a 3:1 contrast ratio against adjacent colors under WCAG 2.1 Success Criterion 1.4.11.
- AAA - Enhanced (7:1): WCAG Level AAA requires a 7:1 ratio for normal text and 4.5:1 for large text. AAA compliance is recommended for critical content such as legal documents, medical information, and government services, but is not required for general web compliance.
Important Notes on WCAG Contrast
The WCAG contrast ratio formula applies to opaque colors only - semi-transparent colors must be evaluated against their actual rendered background. The formula also does not account for font rendering, anti-aliasing, or display calibration, which can affect perceived contrast in practice. Additionally, WCAG contrast requirements do not apply to decorative text, text that is part of a logo, or text in inactive UI components. Always test your designs with real users and assistive technologies in addition to automated contrast checking.
Related Tools
Age Calculator
Calculate your exact chronological age in years, months, weeks, days, hours, and minutes from your date of birth. See life milestones, zodiac signs, and next birthday countdown. Free online age calculator - no signup required.
Date Difference Calculator
Calculate date differences online for free with our date difference calculator. Instantly find days, weeks, months, and years between any two dates. Accurate, fast, and no signup required.
Date Add / Subtract Calculator
Add or subtract days, weeks, months, years, hours, minutes, and seconds from any date. Support for weekdays/business days calculations. Free online date calculator - no signup required.
Days Until / Days Since Calculator
Calculate exact days, weeks, months, or years until a future event or since a past milestone. Save custom events to your dashboard. Free online date counter - no signup required.
Frequently Asked Questions About Color Contrast Ratio Calculator
A color contrast ratio calculator is a tool that measures the difference in perceived brightness between two colors - typically text and its background - and checks whether the combination meets WCAG accessibility standards. Our color contrast ratio calculator implements the official WCAG 2.1 formula and runs entirely in your browser with no signup required.
For WCAG 2.1 Level AA, normal text (below 18pt or 14pt bold) requires a minimum contrast ratio of 4.5:1. Large text (18pt or larger, or 14pt bold or larger) requires 3:1. UI components and graphical objects also require 3:1 against adjacent colors.
WCAG AA is the standard compliance level required by most accessibility laws and guidelines. It requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for critical content but not required for general web compliance.
The color contrast ratio calculator accepts HEX (#rrggbb and #rgb shorthand), RGB (rgb(r,g,b)), RGBA (rgba(r,g,b,a)), HSL (hsl(h,s%,l%)), and HSLA (hsla(h,s%,l%,a)). You can also use the color picker swatch to select any color visually.
Relative luminance is a measure of the perceived brightness of a color on a scale from 0 (black) to 1 (white). It is calculated by linearising each RGB channel using the sRGB gamma function, then combining them as L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
The calculator evaluates colors as opaque. If you enter an RGBA or HSLA color, the alpha channel is ignored and the color is treated as fully opaque. For accurate results with semi-transparent colors, first calculate the actual rendered color by blending the foreground alpha over the background, then enter the resulting opaque color.
Placeholder text in form inputs is considered normal text and must meet the 4.5:1 AA requirement. Many designs use light gray placeholder text that fails this threshold - our color contrast ratio calculator can help you find a shade that passes while still looking visually distinct from filled-in text.
Yes, completely. All contrast ratio calculations happen locally in your browser using JavaScript. Your color values are never sent to any server. Your data never leaves your device, ensuring 100% privacy.
Yes. Our color contrast ratio calculator is 100% free with no signup, no account, and no usage limits. Check as many color combinations as you need - with full WCAG 2.1 AA and AAA compliance results - at no cost, forever.