CSS and Design Tools

Contrast Checker

Check WCAG 2.x contrast ratios for text and color pairs, with alpha compositing, an explicit canvas and unrounded pass/fail thresholds.

Your content stays on your device Free, with no account

Adjust. Preview. Copy.Local processing · no uploads

A FEW SIMPLE STEPS

How to use Contrast Checker

Enter the labeled colors and settings. Use sliders or exact inputs for bounded numeric controls.
Review the live preview and calculation details. Invalid edits clear obsolete output.
Adjust relevant layers, corner axes, harmony locks or contrast assumptions for your task.
Copy or download the generated output. Reset defaults restores the starting configuration.

PRIVATE BY DESIGN

Why use this tool?

This tool runs entirely in your browser. Inputs are not uploaded or saved, and previews use validated numeric/color settings without external services.

Tool inputs stay in your browser. Only your theme preference is saved on this device.

A few things worth knowing

How does this tool calculate its result?

Convert each sRGB channel to linear light, then Y = 0.2126R + 0.7152G + 0.0722B. Contrast = (lighter Y + 0.05)/(darker Y + 0.05). AA normal text requires 4.5:1; large text 3:1. AAA normal text requires 7:1; large text 4.5:1. Decisions use the unrounded ratio.

What assumptions and limits apply?

WCAG 2.x relative luminance for sRGB colors. Background opacity composites over the opaque canvas, then foreground opacity composites over that result. Large text is at least 24 CSS px normal or 18⅔ CSS px bold. This checks one color pair, not whole-page conformance.

Is anything uploaded or saved?

No. Settings stay in the current page. Only the site theme preference is stored. Exports happen only when you choose them.

How to use Contrast Checker

Why use this tool?

A few things worth knowing

Related tools

Color Palette Generator

Color Converter

CSS Gradient Generator