Skip to content
SPCXTools

Color Contrast Checker

Check whether your text is readable enough — and get the closest color that passes WCAG.

Runs locally — files never leave your device

Loading tool…

How to use Color Contrast Checker

  1. 1Enter the text color and the background color as HEX, RGB, HSL or a color name, or pick them with the color pickers.
  2. 2Read the contrast ratio and the pass/fail results for WCAG AA and AAA.
  3. 3Check the live preview with large, normal and small text.
  4. 4If it fails, click a suggested color to use the closest shade that passes.

Make sure everyone can read your text

Light grey text on white, white text on a pastel button, or blue links on a dark background can look elegant in a design file and be unreadable for real users. This contrast checker measures the contrast ratio between any text and background color and tells you instantly whether it meets the Web Content Accessibility Guidelines (WCAG) at level AA and AAA — and if not, it suggests the nearest color that does.

Features

  • Contrast ratio from 1:1 to 21:1.
  • WCAG 2 AA and AAA results for normal text, large text and UI components.
  • Any color format: HEX, RGB, HSL or CSS color names.
  • Live preview with headline, body and small text.
  • Accessible color suggestions that keep your hue.
  • Swap button to check light-on-dark versions.

WCAG requirements at a glance

Content AA AAA
Normal text 4.5:1 7:1
Large text (≥ 24 px, or ≥ 19 px bold) 3:1 4.5:1
UI components and graphics 3:1 —
Logos and decorative text No requirement No requirement

Common combinations

Text Background Ratio AA normal text
#000000 #FFFFFF 21:1 Pass
#767676 #FFFFFF 4.54:1 Pass (lightest grey that passes)
#999999 #FFFFFF 2.85:1 Fail
#FFFFFF #0EA5E9 2.77:1 Fail
#FFFFFF #0369A1 5.93:1 Pass

Related tools

Convert colors between formats with the Color Converter, build a full palette with the Color Palette Generator, or pick exact colors from a screenshot with the Image Color Picker.

Frequently asked questions

What contrast ratio do I need?
WCAG 2 level AA, the common legal and industry standard, requires at least 4.5:1 for normal text and 3:1 for large text (about 24 px regular or 19 px bold). Level AAA requires 7:1 and 4.5:1. Icons, input borders and other essential graphics need at least 3:1.
How is the contrast ratio calculated?
The relative luminance of each color is computed from its red, green and blue values, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). It ranges from 1:1 (identical colors) to 21:1 (black on white).
How are the suggested colors chosen?
The tool keeps the hue and saturation of your text color and changes only its lightness, step by step, until the target ratio is reached. The result looks as close as possible to your original color.
Why does contrast matter?
Around one in twelve men has some form of color vision deficiency, many people have low vision, and everyone struggles with low contrast on a phone in sunlight. Good contrast makes your text readable for all of them, and it's required by accessibility laws in many countries.
Does it consider transparency?
No. Colors are treated as opaque. If your text is semi-transparent, check the visible blended color instead — pick it from a screenshot with the Image Color Picker.

Related tools

Color ConverterConvert any color between HEX, RGB, HSL, HSV and CMYK, and check its contrast.Color Palette GeneratorPick one color and get a harmonious five-color palette based on color theory.Image Color PickerClick anywhere on an image to get its exact HEX, RGB and HSL color — plus its main color palette.CSS Gradient GeneratorDesign a gradient background visually and copy the CSS — linear, radial or conic.Box Shadow GeneratorFine-tune soft, sharp, layered or inset shadows with a live preview and copy the CSS.Color Blindness SimulatorPreview your images through the eyes of someone with color vision deficiency to ensure your designs are accessible.