Skip to content
MySafeToolbox

Contrast Checker

Free WCAG color contrast checker. Test text and background colors for AA and AAA, preview them live and get a passing color suggestion in one click. Fully private.

  • No upload — 100% private
  • Instant, on your device
  • Free, no sign-up
  • Works offline once loaded

How it works

How to use Contrast Checker

  1. Enter your text color and background color, or pick them with the color swatches.

  2. Read the contrast ratio and the pass/fail results for normal text, large text and UI components.

  3. Check the live preview to see how the pairing actually reads.

  4. If it fails, choose a target and apply the suggested lighter or darker color.

Why use it

Why use our Contrast Checker tool

All WCAG 2.2 checks

AA and AAA for normal and large text, plus the 3:1 rule for icons, borders and form controls.

Honest ratios

Ratios are compared unrounded and displayed truncated, so 4.49 never shows up as a pass.

One-click fixes

Suggests the smallest lightness change that passes, keeping your hue and saturation.

Any color format

Type HEX, RGB, HSL, OKLCH or CSS color names — or use the color picker.

Realistic preview

See headings, body copy, small print, a button and an icon in your exact colors.

FAQ

Frequently asked questions

What contrast ratio do I need for WCAG AA?

Normal text needs at least 4.5:1 and large text needs 3:1. User-interface components and meaningful graphics such as icons and input borders also need 3:1 against adjacent colors.

What counts as large text?

WCAG defines large text as at least 18 point (24 CSS pixels) at regular weight, or 14 point (about 18.66 CSS pixels) when bold.

What is the difference between AA and AAA?

AA is the level most laws and policies require. AAA is stricter — 7:1 for normal text and 4.5:1 for large text — and is recommended for long reading or audiences with low vision.

How is the contrast ratio calculated?

Each color's relative luminance is computed from its linearised sRGB values. The ratio is (lighter + 0.05) divided by (darker + 0.05), giving a range from 1:1 to 21:1.

How does the passing color suggestion work?

It changes only the OKLCH lightness of the color, step by step in both directions, and returns the closest version that meets your target. Your brand hue stays recognisable.

Related tools

Color Converter

Convert any color to HEX, RGB, HSL, HSV, CMYK and OKLCH.

popular

Color Palette Generator

Press space for beautiful 5-color palettes. Lock, tweak, export.

CSS Gradient Generator

Design linear, radial and conic gradients and copy the CSS.

Password Strength Checker

See how long your password would survive — privately.