Design & Frontend

Color Contrast Checker

Check WCAG contrast ratios for accessible color pairs.

Contrast Checker

Check WCAG contrast ratio between foreground and background colors with size samples and swap.

Design tools run in the browser. Uploaded images are not sent to a server.

Foreground (text)

Background

Contrast ratio

14.63:1

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Sample Text Preview

Body 16px

Readable paragraph sample for UI body copy.

Large 24px

Caption under a heading

Pro tips

Design & Frontend

Check WCAG contrast ratios for accessible color pairs.

Colors, logos, layouts, fonts, and visual builders for web projects.

Design tools run in the browser. Uploaded images are not sent to a server.

How to use

Pro tips

Quick navigation

More free tools

Upload an image and extract a brand-ready color palette with hex codes.

Build CSS gradients with live preview and one-click code copy.

Convert between px, rem, em, and percent for responsive CSS work.

Generate placeholder paragraphs for website mockups and design drafts.

Loading tools…