Color Contrast Checker

How to use

1. Pick Colors — Choose a foreground (text) and background colour using HEX or the colour picker.
2. See the Ratio — The tool calculates the WCAG 2.1 contrast ratio instantly.
3. Check Compliance — Confirm AA / AAA pass marks for normal and large text plus UI components.

The Color Contrast Checker calculates the WCAG 2.1 contrast ratio between any two colours and tells you exactly which accessibility levels you pass. Designers, developers, and product owners use it to ship inclusive interfaces.

Features

• Instant WCAG 2.1 contrast ratio.
• AA and AAA pass/fail badges for normal text, large text, and UI components.
• Native HTML5 colour pickers plus HEX input.
• Live preview swatch — see your colour pair as real text before you commit.

Why contrast matters

Roughly 1 in 12 men and 1 in 200 women experience some form of colour-vision deficiency. Low-contrast UI fails them, plus anyone reading in bright sunlight or on aging screens. Meeting AA (4.5:1) is also a baseline for most accessibility laws — ADA, EAA, AODA.

Frequently asked questions

What contrast ratios do I need?

WCAG 2.1: AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 normal and 4.5:1 large. UI components and graphical objects need at least 3:1.

What counts as 'large text'?

Text rendered at 18pt (≈24px) regular, or 14pt (≈18.66px) bold.

Is the WCAG ratio enough?

It is the legal minimum in most jurisdictions, but does not capture every accessibility nuance (colour blindness, reading speed). Always test with real users and tools like the upcoming APCA algorithm.

Does this work for transparent or gradient backgrounds?

No — WCAG contrast assumes a flat opaque background. For gradients or images, test against the darkest and lightest points.

Related free tools

• Color Converter — Convert between HEX, RGB, and HSL color formats.
• CSS Gradient Generator — Create linear and radial CSS gradients with live preview.
• Box Shadow Generator — Design CSS box shadows with a visual editor.
• Border Radius Previewer — Preview and generate CSS border-radius values.
• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.