Color Contrast Checker

Calculate the contrast ratio between text and background in real time using the WCAG 2.1 relative luminance formula, with AA/AAA pass or fail judgment for accessible interface design.

What is Color Contrast?

Color contrast ratio measures the difference in luminance between a foreground color (such as text) and a background color. The value ranges from 1:1 to 21:1. The higher the contrast, the easier text is to read, especially in low-light environments or on low-resolution screens. WCAG 2.1 defines a standard relative luminance formula: each sRGB channel is linearized first, then weighted by 0.2126, 0.7152 and 0.0722 to produce luminance L, and finally the ratio is computed as (L1 + 0.05) / (L2 + 0.05).

WCAG AA and AAA Requirements

  • AA normal text: ratio ≥ 4.5:1, the minimum accessibility standard for most websites
  • AA large text (≥18pt or 14pt bold): ratio ≥ 3:1
  • AAA normal text: ratio ≥ 7:1, recommended for higher readability
  • AAA large text: ratio ≥ 4.5:1

How to Use This Tool

  1. Pick a color or type a hex value for the foreground (text) and the background
  2. The tool computes the ratio in real time and shows AA/AAA results for each level
  3. A preview area renders sample text with your chosen colors
  4. If a level fails, adjust the colors until it passes

Frequently Asked Questions

What contrast ratio is safe? Normal body text should reach at least AA 4.5:1. For older users or low-vision audiences, AAA 7:1 is recommended. Large headings and button text may use 3:1.

Why does my color combination fail? Light gray text on a white background is usually only about 2:1. Darken the text, lighten the background, or switch to a deeper brand color. This tool lets you fine-tune colors until they pass.

Is my data uploaded to a server? No. All calculations run locally in your browser; your colors never leave your device.