Color Contrast Checker

Calculate the contrast ratio of text and background colors.

Text color

Background color

Contrast

0.00

Poor

★★★★★

Small text

Below 18pt regular.

Large text

Above 18pt or bold above 14pt.

Tip of the Day

Clarity should always guide design decisions, turning complexity into understanding.

This tool helps you check the contrast between two colors to ensure they meet Web Content Accessibility Guidelines (WCAG).

Pick your colors: Enter a hex code or use the color picker to select your text and background colors.
Instant ratio: We instantly calculate the mathematical contrast ratio (ranging from 1 to 21).
Live preview: See exactly how your text will appear on the background in the realistic browser preview window.
Check WCAG grades: Normal text needs a ratio of at least 4.5:1 (AA), while large text needs 3.0:1 (AA).
Design accessibly: Good contrast ensures your website is easily readable for everyone, including people with visual impairments.