ColorFlowTools

Color Contrast Checker

Check whether two colors have enough contrast to be readable. Enter a foreground and background color and the checker calculates the exact WCAG contrast ratio and shows clear pass or fail results for normal text, large text, and UI components. You can set font size and weight to see which large-text thresholds apply, swap the two colors, and preview real text on the background. Results are always shown as text, such as Pass, Fail, or Needs improvement, never by color alone, so the outcome is clear to everyone. When a combination falls short, the checker suggests a nearby color that meets the target. Translucent colors are composited over the background before the ratio is calculated, matching what users actually see.

4.54
Contrast ratio
Pass

Large text sample

Normal text sample for readability check.

RequirementThresholdResult

How to use the Color Contrast Checker

  1. Enter two colors. Set a foreground (text) color and a background color.
  2. Set text size and weight. Choose the font size and weight so the right large-text threshold applies.
  3. Read the results. See the contrast ratio and pass/fail for each WCAG level, shown as text.
  4. Fix if needed. Swap colors or apply a suggested alternative that meets the target ratio.

Examples

  • Body text check: Dark gray #595959 on white passes AA (7:1) for normal text.
  • Failing pair: Light gray #bbbbbb on white fails AA for normal text and is flagged as needing improvement.

How it works

Contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text or UI components; AAA requires 7:1. Luminance uses the WCAG formula, and alpha colors are composited over the background first.

Common use cases

  • Verifying body text is readable on colored backgrounds
  • Checking button, link, and border colors before launch
  • Auditing an existing design for low-contrast combinations

Privacy

All color calculations run in your browser. Nothing you enter is sent to a server. Saved palettes and recent colors are kept only in your browser’s local storage and can be cleared at any time.

Frequently asked questions

What ratio do I need to pass?

AA needs 4.5:1 for normal text and 3:1 for large text or UI components. AAA needs 7:1 for normal text. The checker reports each separately.

What counts as large text?

Roughly 18.66px bold or 24px regular and larger. Setting the size and weight tells the checker which threshold applies.

How are transparent colors handled?

A translucent foreground is composited over the background before the ratio is calculated, matching what users see.

Does passing contrast make my site accessible?

Contrast is one key factor, not the whole picture. A full audit also covers keyboard use, structure, labels, and more.

WCAG Contrast Checker Test color pairs against WCAG 2.2 AA and AAA thresholds with detailed results. Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support. Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export. Color Palette Generator Generate color schemes with lock, reorder, and export to CSS, JSON, SVG, and PNG. Color Name Finder Find the closest CSS color name for any color, with similar colors and a palette.