Color Contrast Checker

How to Use

1. Enter a foreground hex (the text or symbol color) on the left, and a background hex on the right.
2. Use the native color picker, type a hex value, or paste from your design tool. Three-digit shorthand (#abc) is auto-expanded.
3. The contrast ratio updates instantly — for example 12.6 : 1, with a headline AA / AAA pass badge.
4. Three status cards break the result down into body text, large text, and UI components, each with AA and AAA results.
5. If body text AA (4.5 : 1) fails, a suggestion card appears with a one-click Apply suggestion action that adjusts the foreground lightness while keeping the same hue.

WCAG Contrast Ratio Explained

The WCAG 2.x contrast ratio is computed from the relative luminance of two colors. Each sRGB channel is gamma-decoded with the piecewise transfer curve, weighted by 0.2126·R + 0.7152·G + 0.0722·B, and the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two luminances. The result lies between 1 (no contrast) and 21 (pure black on pure white).

Body, Large, UI — Three Tiers

WCAG 2 splits contrast targets by use case:

• Body text (Success Criterion 1.4.3) — at least 4.5 : 1 for AA and 7 : 1 for AAA. Counts text below 18 px regular or below 14 px bold.
• Large text — at least 3 : 1 for AA and 4.5 : 1 for AAA. Counts text 18.66 px bold or larger, or 24 px regular and larger.
• UI components and graphical objects (Success Criterion 1.4.11) — at least 3 : 1. Covers borders, focus indicators, icons, chart strokes, and similar non-text visual elements. WCAG 2 does not specify an AAA target here.

Why “Keep Hue, Adjust Lightness”

Brand colors and design tokens are usually picked for hue identity, not luminance. When contrast fails, blindly switching to black or white can break the visual language. This tool walks the foreground along its OKLCH lightness axis (perceptually uniform), keeps the original hue and chroma, and stops at the first lightness that satisfies 4.5 : 1 against the current background. The result is the color closest to your original that still passes body AA. If your hue cannot reach the target within the sRGB gamut, the tool falls back to flat black or white.

Privacy

Every calculation — hex parsing, OKLCH conversion, contrast ratio, suggestion search — runs locally in your browser. No color, no preference, no analytics about your input is uploaded.

Related Tools

• Color Palette Generator — build complementary, analogous, triadic, and tetradic palettes from any base color.
• Color Converter — convert between HEX, RGB, and HSL.
• Color Shades Generator — produce Tailwind-style 10-shade scales from any base color.