ToolPuma Logo

Color Contrast Checker

Check the contrast ratio between two colors.

Sample Text

The quick brown fox jumps over the lazy dog.

Contrast ratio

14.68:1

Normal text AA: Pass

Large text AA: Pass

Normal text AAA: Pass

What Is a Color Contrast Checker?

The Color Contrast Checker measures the WCAG contrast ratio between a foreground and a background color and tells you whether they pass AA and AAA for normal and large text. It also renders your exact text-on-color pairing so you can judge readability visually. Choosing high-contrast color pairs is one of the simplest and most impactful accessibility improvements for any interface.

How to Use This Color Contrast Checker

  1. 1
    Choose a foreground (text) color and a background color.
  2. 2
    View the live contrast ratio and WCAG pass/fail results.
  3. 3
    Use the sample text preview to confirm readability at a glance.

Frequently Asked Questions

It compares the relative luminance of two colors, ranging from 1:1 (identical colors) to 21:1 (black on white). Higher ratios mean better readability.
Normal text needs at least 4.5:1 (AA) and 7:1 (AAA). Large text needs 3:1 (AA) and 4.5:1 (AAA). UI components and graphics need 3:1.
To all text and meaningful graphics: body copy, links, form labels, icons, focus indicators, and any component where users need to see information clearly.

Related Color & Design Tools

Color Picker

Pick any color and get its HEX, RGB, and HSL values.

Color Palette Generator

Generate a harmonious color palette from a base color.

Random Color Generator

Generate random colors with HEX, RGB, and HSL values.

Gradient Generator

Create smooth two-color linear gradients instantly.

CSS Gradient Generator

Build linear or radial CSS gradients with color stops.

CSS Box Shadow Generator

Design box shadows and copy the CSS code.

More Color & Design Tools

CSS Border Generator

Style borders with width, style, color, and radius.

CSS Border Radius Generator

Round element corners with live CSS output.

CSS Button Generator

Create styled buttons and copy the CSS code.

CSS Glassmorphism Generator

Make frosted glass style panels with backdrop blur.

CSS Neumorphism Generator

Generate soft UI neumorphism shadows with CSS.

CSS Text Shadow Generator

Add depth to text with custom text shadows.