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 is a free online accessibility tool that calculates the contrast ratio between foreground and background colors. It helps designers and developers evaluate whether text combinations meet WCAG contrast requirements for normal text and large text. The tool also provides a visual preview so you can judge readability instead of relying only on a number. It is useful when designing websites, mobile apps, dashboards, forms, buttons, navigation, and other interfaces where accessible color choices matter.

How to Use This Color Contrast Checker

  1. 1
    Choose the foreground colorSelect the color used for text, icons, or another foreground element.
  2. 2
    Choose the background colorSelect the surface behind the foreground content.
  3. 3
    Check the contrast ratioThe tool calculates the ratio and displays the relevant WCAG pass or fail results.
  4. 4
    Review the previewRead the sample text directly against the selected background to visually confirm the result.
  5. 5
    Improve the colors if neededAdjust either color until the required accessibility level is achieved.

Frequently Asked Questions

A contrast ratio compares the relative luminance of two colors. It ranges from 1:1 for identical colors to 21:1 for the strongest black-and-white combination. Higher ratios generally make text easier to distinguish.
For WCAG 2.x AA, normal text generally requires at least a 4.5:1 contrast ratio. AAA generally requires 7:1. Large text has lower thresholds, so the text size and weight need to be considered.
WCAG 2.x generally uses a minimum ratio of 3:1 for large text at AA and 4.5:1 at AAA. The exact definition of large text depends on font size and weight.
Check body text, headings, links, labels, buttons, icons that communicate information, form controls, focus indicators, and meaningful graphical elements. Important content should not depend on low-contrast colors alone.
Human perception varies, especially across displays and lighting conditions. WCAG uses a mathematical contrast ratio to provide a consistent minimum standard rather than relying only on visual judgment.
Yes. It is useful for checking individual foreground and background combinations during design and development. A complete accessibility audit should also consider typography, keyboard navigation, focus states, semantics, and other WCAG requirements.

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.