Español
Theme

ContrastDuo — Dual Color Contrast Checker WCAG 2 & APCA

Colors

Supports hexadecimal, RGB, HSL, OKLCH, and CSS color names.

1
Adjust in OKLCH
0.25 0.05 250

OKLCH lets you adjust the lightness of a color without changing its hue. Useful for finding a color variant that meets the required contrast.

Supports hexadecimal, RGB, HSL, OKLCH, and CSS color names.

Adjust in OKLCH
1 0 0

OKLCH lets you adjust the lightness of a color without changing its hue. Useful for finding a color variant that meets the required contrast.

Contrast results

WCAG 2

— : 1

  • Normal text AA (≥ 4.5:1)
  • Normal text AAA (≥ 7:1)
  • Large text AA (≥ 3:1) · ≥ 24px normal or ≥ 18.66px bold
  • Large text AAA (≥ 4.5:1) · ≥ 24px normal or ≥ 18.66px bold
  • UI components (≥ 3:1)

WCAG 2 uses a fixed ratio that does not account for contrast polarity, font weight, or actual font size.

APCA

Lc —

  • Lc ≥ 90 — Body text · a limit only for large text ≥ 16px normal Preferred level for sustained reading. Going above it is not a problem at normal sizes: APCA sets no maximum for small fonts. The limit appears above 36px, where excess contrast can cause halation and visual fatigue.
  • Lc ≥ 75 — Body text / Interface text ≥ 18px normal Minimum level for text blocks and interface text
  • Lc ≥ 60 — Supplementary text ≥ 24px normal or ≥ 16px bold Titles, subtitles, short snippets
  • Lc ≥ 45 — Large headings ≥ 32px medium · Outline icons (stroke ≥ 4px) Section headlines, fine-detail icons
  • Lc ≥ 30 — Spot text Disabled, copyright · Solid icons (≥ 5.5px) Text not intended for sustained reading
  • Lc ≥ 15 — Discernible only Dividers, borders (≥ 5px) Decorative elements
About these APCA levels

These are APCA’s general ranges, the same ones the official calculator shows: they classify the color pair by the contrast it reaches, without looking at the size or the weight of the type. ARC-Silver’s conformance values do depend on size and weight, and live in the APCA Reference tab.

APCA measures actual perceptual contrast. It accounts for polarity (light text on dark background produces a different result than the inverse combination) and relates to font size and weight to determine readability.

ARC-Bronze covers only three categories: body text, minimum Lc 75 and preferred Lc 90; other content text 16px or larger, minimum Lc 60; and large fluent content, larger than 32px, minimum Lc 45 and maximum Lc 90 for large and bold text only. It does not cover spot text — disabled, placeholder, ancillary or decorative — which is handled at the Silver and Gold levels.

The “minimum” / “preferred” distinction is officially defined only for body text at Bronze (Lc 75 and Lc 90). The APCA Reference tab is the Silver level view.

Browser tools

Two bookmarks that carry ContrastDuo onto any page. You install them once by dragging them to the bookmarks bar, and they run without sending anything to any server.