Skip to content
Submit

Tool

APCA Contrast Calculator

Reference calculator for APCA perceptual contrast.

Visit websiteBack to UI Kits & Components
APCA Contrast Calculator preview

About

APCA reports lightness contrast as an Lc value from Lc 0 to Lc 106 for dark text on a light background, and Lc 0 to Lc -108 for light text on a dark background (dark mode). The minus sign merely indicates negative contrast, which means light text on a dark background.

INPUT BOXES: You can enter a CSS color name or a 3 to 6 character hex value with or without a #, or as rgb() using numbers or percentages, with or without the 'rgb' and parenthesis. There is also a special shortcut for grey: enter only 1-3 rgb digits followed by a comma or percent symbol, or two hex digits (no comma) and they will be expanded. for instance, #fa becomes #fafafa.

POLARITY: The APCA is polarity aware, this means that it recognizes the difference of dark text on a light background vs light text on a dark background. Therefore it is important to enter the text/icon color or background color in the correct input.

SWAP COLORS: You can easily swap the text and background color by clicking the big ampersand (&) in the middle.

Features

  • Cross index reference font size (in CSS px) to CSS weight.
  • Reference fonts for comparison include Barlow, Helvetica Neue, Helvetica, Fira Sans, Kanit, and Arial.
  • A ⊘ indicates that a larger font size (or heavier font weight) must be used.
  • Cells marked with may be used for body text. The the body text cells outlined in yellow, add lc 15.
  • So, always add 100 in weight to Raleway to be equivelent.
  • See this discussion answer for more.
Pricing
Free
Pricing detail
Free reference tools
Platforms
Web
See alternatives to APCA Contrast Calculator →

Alternatives from our catalog

Tools on the same shelves as APCA Contrast Calculator, ordered by shared tags and our own comparisons. Not vendor endorsements.

  • WhoCanUseFree · Web

    Empathy-driven a11y beyond a single ratio.

    same tags

  • HuemintFree · Web

    Context-aware AI palettes instead of isolated swatches.

    same tags

  • Realtime ColorsFree · Web

    Best in-context UI validation before committing tokens.

    same tags

  • ColorboxFree · Web

    Popularized palette-as-function thinking behind Tailwind/Radix.

    same tags

  • CoolorsFreemium · Web, iOS, Android, Figma, Adobe

    Default daily driver for quick 5-swatch exploration.

    same tags

  • Adobe ColorFreemium · Web, Creative Cloud

    CC-native wheel for Adobe-heavy teams.

    same tags

Add a badge to your site

Makers listed on isthereanytool.app can embed this badge. It links to APCA Contrast Calculator’s page on our catalog — no scripts, just HTML.

Featured on isthereanytool.app
<a href="https://www.isthereanytool.app/tool/apca-contrast-calculator" target="_blank" rel="noopener"><img src="https://www.isthereanytool.app/badge/listed.svg?theme=paper" alt="Featured on isthereanytool.app" width="250" height="54"></a>

Listed in