Contrast Checker
Check WCAG contrast ratio between two colors, including non-text and transparency.
Calculated locally in your browser.
- Live ratio plus explicit AA / AAA pass or fail for both normal and large text, and a separate Non-text (3:1) check for UI component borders, icons and graphics — a real WCAG 1.4.11 requirement, not just body text.
- Opacity sliders on both colors compute the actual rendered contrast for semi-transparent text or overlays, not just two opaque colors — set a page color behind a translucent background to model real stacking.
- Uses the exact WCAG 2.1 relative-luminance formula, not an approximation.
- Runs in your browser — check unreleased designs privately.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Calculates the WCAG contrast ratio between a text color and background color, checking it against the AA and AAA thresholds for normal and large text plus WCAG 1.4.11's 3:1 non-text (UI component/graphic) requirement — with an opacity slider on each color for a genuinely accurate ratio when either one is semi-transparent.
How to use it
- 1Choose a text color and background color.
- 2If either is semi-transparent, lower its opacity slider — set the page color behind a translucent background too.
- 3View the contrast ratio and which WCAG levels it passes, including the non-text 3:1 check.
Formula
Contrast ratio
(L1 + 0.05) / (L2 + 0.05)
L1 and L2 are the relative luminance of the lighter and darker colors, after compositing any transparency over what's behind them.
Tips
- AA is the baseline most sites should meet: 4.5:1 for normal text, 3:1 for large text (18pt+, or 14pt+ bold) and for non-text UI components/graphics.
Frequently asked questions
What people use it for
Check body text against its backgroundConfirm your default text colour clears AA (4.5:1) before shipping.
Check an icon, border or focus ringUse the Non-text (3:1) result for meaningful UI components and graphics, which WCAG 1.4.11 holds to a lower bar than body text.
Check semi-transparent overlay textSet the text or background opacity below 100% to get the real contrast of a translucent overlay, not a falsely-optimistic opaque-color calculation.
Audit a design system's tokensRun each foreground/background combination in your palette.
Fix a failing accessibility reportAdjust one colour until the ratio crosses the threshold Lighthouse flagged.
Related tools
All design toolsColor PickerPick a color from anywhere on your screen, or enter one manually — HEX, RGB, HSL, CMYK, OKLCH.Color ConverterConvert colors between HEX, RGB, HSL and OKLCH.Color Palette GeneratorGenerate, lock, and export harmonious color palettes.CSS Gradient GeneratorBuild a linear or radial CSS gradient from multiple colors, with a live preview and one-click copy.
Ready to use Contrast Checker?
Contrast Checker