Uwarp

APCA contrast checker for perceptual color contrast

Tool powered by Color Contrast App on Color Contrast App.

Run an APCA contrast checker in the browser. Test perceptual contrast and WCAG-style ratios with colorcontrast.app—no download required.

What is perceptual contrast?

Perceptual contrast is how readable one color feels against another for real users—accounting for lightness, hue, font size, and polarity—not only a math ratio on paper. An APCA contrast checker uses the Advanced Perceptual Contrast Algorithm to score pairs for modern UI. The public app at https://colorcontrast.app/ is a common choice for that workflow; Uwarp embeds it on /color-contrast and adds guidance. Teams still reference WCAG 2.x ratios for many audits, and may also use desktop tools such as the TPGi color contrast analyzer when a download fits policy. You do not need a separate color contrast analyzer download to try APCA here—the frame runs in the browser.

What the colorcontrast.app embed provides

APCA-focused perceptual contrast, quick pair testing, and browser access without a separate download.

  1. APCA-style scoring: See perceptual contrast results geared toward modern UI, not only a single luminance ratio.
  2. Foreground and background pairs: Enter hex or pick colors, then read whether the combination works for text and components.
  3. WCAG context: Compare familiar ratio thresholds when you still need WCAG 2.x documentation alongside APCA.
  4. Browser-based: No color contrast analyzer download—calculations run through the embedded app in your session.
  5. Privacy-friendly session: Work happens client-side via the third-party origin; Uwarp does not store your color pairs.
  6. Pairs with palette tools: Use /accessible-brand-colors for full palettes, then validate final pairs here.

How to use the APCA contrast checker embed

A short workflow for perceptual contrast review before you ship CSS or design tokens.

  1. Open the embed: Use the frame below after this guide. If it fails to load, open colorcontrast.app from the FAQ link.
  2. Set foreground and background: Paste hex values or use the picker for text (or icons) and the surface behind them.
  3. Read APCA and ratio outputs: Note perceptual contrast scores and any WCAG-style pass labels shown in the UI.
  4. Test real typography: Re-check at the font size and weight you ship—APCA can shift with text parameters.
  5. Adjust or swap colors: Nudge lightness or pick a neighboring token until the pair passes your target level.
  6. Document the pair: Record allowed combinations in your system so marketing and product do not reintroduce failures.

Tips for APCA and WCAG together

Use both perceptual contrast and legacy ratios where your process requires them.

  1. Know which metric you report: Design with APCA; confirm whether legal or client deliverables still list WCAG 2.x ratios.
  2. Flatten transparent colors: Composite alpha on the real background before you trust any contrast score.
  3. Test links and focus rings: Small UI elements need their own pair checks, not only body paragraph colors.
  4. Avoid color-only states: Pair contrast work with icons or labels so success and error are not hue-only cues.
  5. Re-check after theme changes: Dark mode flips polarity; rerun the APCA contrast checker when surfaces invert.
  6. Watch bright orange and yellow: Warm accents often fail perceptual contrast on white—try darker surfaces or heavier weight.

Who uses perceptual contrast checking

Teams that outgrew spreadsheet ratios or need APCA alongside legacy WCAG reporting.

  1. UI and product designers: Validate buttons, links, and body copy with an APCA contrast checker before handoff.
  2. Front-end developers: Confirm CSS variables against perceptual contrast, not only hex distance.
  3. Accessibility specialists: Compare APCA results with familiar WCAG audits and tools like the TPGi color contrast analyzer when clients require both.
  4. Design system owners: Publish which pairs pass perceptual contrast for each semantic token role.
  5. QA testers: Spot-check critical screens without installing a desktop color contrast analyzer download.
  6. Content designers: Ensure emphasis colors and links stay readable on tinted article backgrounds.

Why test perceptual contrast on Uwarp

Keep APCA checking beside other color utilities instead of bookmarking another single-purpose site.

  1. Modern readability signal: APCA reflects how type and UI actually look on screens, which pure luminance math can miss.
  2. Faster design loops: Catch failing pairs while tokens are still flexible, not after launch screenshots.
  3. No install for quick reviews: Browser embed suits meetings and audits when you cannot add desktop software.
  4. Works with palette workflows: Narrow choices on /accessible-brand-colors, then confirm single pairs here.
  5. Clear third-party source: Scores follow colorcontrast.app; Uwarp documents how to use the embed responsibly.
  6. Better mobile legibility: Strong perceptual contrast helps glare and small screens, not only compliance checklists.

Technical notes

This page wraps the third-party colorcontrast.app experience. Metrics and controls follow the upstream app.

  1. Embed source: Iframe loads https://colorcontrast.app/ as published by the maintainers, not a Uwarp fork.
  2. Algorithms: APCA (perceptual) scoring is the focus of the embedded app; WCAG 2.x relative luminance may appear for comparison depending on the current UI.
  3. Client-side: Calculations run in the browser through the third-party origin; Uwarp does not proxy color data.
  4. Related tools: Pair with /accessible-brand-colors for palette-level checks and /ccolor for hex and transparent color codes.
  5. Desktop alternatives: Teams that require an install often use the TPGi color contrast analyzer; this embed avoids a download for quick browser checks.
  6. Framing: If the embed is blocked, open colorcontrast.app directly. Cookie behavior follows their domain.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools