Color Tools

Color Contrast Checker

Compare two colors and see whether their contrast meets common accessibility targets.

Loading color workspace…
Browser-only processingYour files are processed locally in your browser and are never uploaded to our servers.

Browser-only processing

What Color Contrast Checker does

The ratio is calculated from relative luminance, with 1:1 representing identical luminance and 21:1 the maximum.

Supported formats or input: Accepts supported CSS color values and reports a numeric contrast ratio.

How to use Color Contrast Checker

  1. Set the text and background colors.
  2. Review the ratio and pass/fail results.
  3. Adjust either color until the relevant target passes.

Example and processing method

Example: Dark text on white often passes, while medium gray text may fail for normal-size copy.

sRGB channels are linearized before relative luminance and contrast are calculated.

Common mistakes and limitations

Common mistake: Large-text thresholds only apply when the rendered font meets the required size and weight.

Contrast is one accessibility factor; focus states, typography and color-independent cues also matter.

Privacy

Color values are calculated locally.

No registrationLocal processingClear output

Related tools

Color PickerPick colors and copy normalized HEX, RGB and HSL values.Color ConverterConvert HEX, RGB, HSL, HSV, CMYK and CSS color names.Gradient GeneratorBuild linear, radial and conic CSS gradients with editable stops.Color Palette GeneratorGenerate practical color harmony and brand palette suggestions.Image Color PickerInspect exact pixel colors from a local JPG, PNG or WebP image.Image Palette ExtractorExtract an approximate dominant palette from a local image.

Frequently asked questions

What ratio does normal text need?

WCAG AA commonly requires at least 4.5:1 for normal text.

Does a passing ratio guarantee accessibility?

No. It addresses color contrast only.