HandyTools Hub

Color Contrast Checker

Test color combinations for WCAG accessibility compliance

Foreground Color

Background Color

Preview

Large Text Sample

Normal text sample. The quick brown fox jumps over the lazy dog.

Results

--
Contrast Ratio
AA Normal Text
--
AA Large Text
--
AAA Normal Text
--
AAA Large Text
--
Foreground L: --, Background L: --
Back to Tools

The Color Contrast Checker measures the contrast ratio between any two colors and tells you whether the combination passes WCAG AA or AAA accessibility standards. It is built for designers and developers who want readable, accessible interfaces without guessing — pick two colors, get a definitive pass/fail answer.

How to Use

  • Choose colors: Enter HEX values or use the pickers for your text and background colors.
  • Read the ratio: The tool instantly computes the contrast ratio, from 1:1 up to 21:1.
  • Check compliance: See whether the pair passes AA and AAA, for normal and large text.
  • Adjust and retry: Tweak either color until the ratio clears your target.

Features

  • Accepts HEX colors in 3- or 6-digit form, with or without the # prefix
  • Computes the exact WCAG 2.1 contrast ratio
  • AA and AAA pass/fail verdicts for both normal and large text
  • Live sample preview of the color combination
  • Runs entirely in your browser

Why Contrast Matters

Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and far more people read screens in bright sunlight or with aging eyes. Low-contrast text — the classic light gray on white — is hard for everyone and unreadable for many. Contrast is not an edge-case concern; it is baseline readability.

The WCAG formula is deliberately perception-based. It converts each color’s sRGB values into a relative luminance using the same non-linear response curve as human vision, then compares the two luminances. That is why ratios can surprise you: white on black scores the maximum 21:1, while two colors that look distinct, like #777777 on #999999, fail badly at around 2:1.

Use Cases

  • UI designers: Validate text and button colors against brand backgrounds.
  • Front-end developers: Catch failing pairs before an accessibility audit does.
  • Content teams: Check link and caption colors in CMS themes.
  • Accessibility testers: Document exact ratios in WCAG compliance reports.

Frequently Asked Questions

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

What contrast ratio do I need for AA compliance?

Normal text (<18pt) requires at least 4.5:1. Large text (18pt+ or 14pt+ bold) requires at least 3:1. For AAA compliance, these rise to 7:1 and 4.5:1 respectively.

How is contrast ratio calculated?

Per WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is of the darker color. Relative luminance uses a linearization formula from sRGB values.