ContrastDuo — Dual Color Contrast Checker WCAG 2 & APCA
Colors
Supports hexadecimal, RGB, HSL, OKLCH, and CSS color names.
Color not recognized. Try hexadecimal (#ff6600), RGB (255 102 0), or HSL (120, 50%, 50%).
Adjust in OKLCH
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.
Color not recognized. Try hexadecimal (#ff6600), RGB (255 102 0), or HSL (120, 50%, 50%).
Adjust in OKLCH
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.5px bold
- Large text AAA (≥ 4.5:1) · ≥ 24px normal or ≥ 18.5px 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 ≥ 16px normal Preferred level for sustained reading and long-form text
- Lc ≥ 75 — Body text / Interface text ≥ 18px normal Minimum level for text blocks and interface elements
- 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, separators
About these APCA levels
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.
Levels Lc 90–45 are covered by the simplified mode of the ARC (APCA Readability Criterion) conformance framework. Levels Lc 30 and Lc 15 require the advanced mode and cover secondary text and non-text elements. ARC's specific guidelines for non-text elements are still in development.
The "minimum" / "preferred" distinction is officially defined only for body text (Lc 75 and Lc 90). For other uses, the APCA Reference tab shows minimum (thin border) and preferred (thick border) levels for each size and weight combination.