Skip to content

Color Contrast Checker

This tool helps you check color contrast ratios for accessibility compliance. Test multiple foreground and background color combinations against the modern APCA algorithm (WCAG 3 draft) or WCAG 2.x (AA/AAA) standards.

Paste your colors in the text areas below; the tool will test all combinations and show you which pairs meet accessibility requirements.

Contrast Algorithms

APCA (Accessible Perceptual Contrast Algorithm)

APCA is a modern contrast algorithm developed for WCAG 3.0 (draft). APCA generates contrast values based on the Accessible Perceptual Contrast metric, which provides perceptually uniform measurements across the color spectrum.

Unlike WCAG 2.x, an APCA value of Lc 60 represents the same perceived readability contrast whether colors are light or dark. WCAG 2.x has known issues where it overstates contrast for dark colors.

Key characteristics:

  • Uses Lc (lightness contrast) values ranging from 0 to ~106 (or negative for light text on dark backgrounds)
  • Considers polarity: light-on-dark vs dark-on-light text
  • Perceptually uniform across the color spectrum
  • Font size and weight dependent thresholds

Minimum APCA Lc values (simplified levels):

  • Body Text: Lc 75+ (minimum for body text columns)
  • Large Text: Lc 60+ (minimum for non-body content)
  • UI Components: Lc 45+ (minimum for large text/headlines)

WCAG 2.x Contrast Ratio

The Web Content Accessibility Guidelines (WCAG) 2.1 and newer define minimum contrast ratios to ensure text is readable for people with visual impairments. Laws and regulations may require your website to comply with these requirements.

Applies to: regular text, images of text, placeholder text, hover/focus text.
Exempt: logotypes, decorative/invisible text.

Normal Text (< 24px or < 19px if bold):

  • WCAG AA: Minimum contrast ratio of 4.5:1
  • WCAG AAA: Minimum contrast ratio of 7:1

Large Text (≥ 24px or ≥ 19px if bold):

  • WCAG AA: Minimum contrast ratio of 3:1
  • WCAG AAA: Minimum contrast ratio of 4.5:1

Supported Color Formats

  • Named colors (red, blue, rebeccapurple)
  • Hex codes (#ff0000, #f00)
  • RGB/RGBA (rgb(255, 0, 0), rgba(255, 0, 0, 0.5))
  • HSL/HSLA (hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5))
  • Modern syntax (rgb(255 0 0), hsl(0 100% 50% / 0.5))
  • Lab, Lch, Oklab, Oklch, HWB, and more