offlineutils
100% offline
Color
Free · no signup
Updated

Color Contrast Checker

A Color Contrast Checker measures the WCAG contrast ratio between a text (foreground) color and a background color — from 1:1 to 21:1 — and reports whether the pair passes WCAG 2.x AA and AAA for normal text, large text, and UI components, computed entirely in your browser.

The quick brown fox jumps over the lazy dog. Normal body text at 16px.

Large heading text · 24px bold

Small print and captions render here too.

Contrast ratio

14.76:1

  • Normal textAA
    Pass
  • Normal textAAA
    Pass
  • Large textAA
    Pass
  • Large textAAA
    Pass
  • UI & graphicsAA
    Pass

About Color Contrast Checker

Enter any foreground and background color as HEX, RGB, HSL, or OKLCH (or use the pickers) and the checker computes the exact contrast ratio using the official WCAG relative-luminance formula, then grades it against every threshold: 4.5:1 for normal text (AA), 7:1 (AAA), and 3:1 for large text and non-text UI. Translucent colors are alpha-composited over the background first so the ratio reflects what users actually see. A live preview shows real text at body and heading sizes on your chosen background. Nothing is uploaded — the math runs locally.

What Color Contrast Checker does

  • Exact WCAG 2.x contrast ratio (1:1 to 21:1)
  • AA/AAA pass-fail for normal text, large text, and UI/graphics
  • Accepts HEX, RGB, HSL, and OKLCH, plus native color pickers
  • Alpha-aware — composites translucent colors before measuring
  • Live preview of real text at body and heading sizes
  • Runs entirely in your browser — nothing uploaded

When to reach for Color Contrast Checker

  • Confirming body text meets the 4.5:1 AA minimum before shipping
  • Checking whether a brand color is legible on white or dark backgrounds
  • Auditing button and badge colors against the 3:1 UI-component rule
  • Finding an accessible foreground for a fixed brand background

How to use Color Contrast Checker

  1. 01

    Enter two colors

    Type or pick a foreground (text) color and a background color.

  2. 02

    Read the ratio

    The contrast ratio updates live, from 1:1 (identical) to 21:1 (black on white).

  3. 03

    Check the grades

    See AA/AAA pass or fail for normal text, large text, and UI components, and adjust until it passes.

When to use Color Contrast Checker vs alternatives

AlternativeUse Color Contrast Checker when…Use the alternative when…
Browser DevTools contrast hintyou want to test arbitrary color pairs with no element on the page, and see AAA and large-text grades too.you're inspecting a specific rendered element in place.
WebAIM Contrast Checkeryou'd rather not send colors to a third-party page and want OKLCH input support.you want their specific link-contrast extras.

Frequently asked questions

What contrast ratio do I need to pass WCAG?
For normal body text, 4.5:1 meets AA and 7:1 meets AAA. For large text (at least 24px, or 18.66px bold), 3:1 meets AA and 4.5:1 meets AAA. Non-text UI components and meaningful graphics need at least 3:1 (WCAG 2.1 SC 1.4.11).
How is the contrast ratio calculated?
It uses the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors. Relative luminance is a weighted, gamma-corrected sum of the sRGB channels.
What happens with semi-transparent colors?
Contrast is only defined for opaque colors, so a translucent foreground is alpha-composited over the background (and a translucent background over white) before the ratio is computed — matching what the eye actually sees.
Does large text really need less contrast?
Yes. Larger, heavier text is easier to read, so WCAG lowers the AA bar to 3:1. 'Large' means at least 24px, or 18.66px (14pt) if bold.
Is my color data sent anywhere?
No. Every calculation runs locally in your browser with no network calls. Open DevTools then Network and you'll see zero requests.

Related tools

Color Converter

Convert colors between HEX, RGB, HSL, and OKLCH.

Color Palette Generator

Build harmonious color palettes from one base color — no AI.

Color Shades Generator

Generate tints and shades of any color as an even OKLCH ramp.