Skip to tool

APCA Contrast Checker

Check text contrast using the APCA algorithm.

Output will appear here…

How to Use This Tool

  1. Fill in Text Color (hex), and Background Color (hex). Each control is labeled; you do not need to paste a JSON blob.
  2. Click "Run" to run the tool in your browser.
  3. Read the result below the form and copy it if you need it in another app.

Learn More About APCA Contrast Checker

About APCA Contrast Checker

Check text/background contrast using the APCA algorithm (WCAG 3.0 candidate).

About

Check text/background contrast using the APCA algorithm (WCAG 3.0 candidate).
Check text/background contrast using the APCA algorithm (WCAG 3.0 candidate).
Runs in browser
Yes
No signup required
Yes

Examples

Dark on light

Dark on light
Input
{
  "text": "#333333",
  "background": "#ffffff"
}
Output
Text: #333333
Background: #ffffff
APCA Lc: 100.2
|Lc|: 100.2
Rating: AAA (body text)

── APCA Guidelines ──
Lc ≥ 90: Best for body text (AAA)
Lc ≥ 75: Good for body text (AA)
Lc ≥ 60: Large text only (AA)
Lc ≥ 45: Non-text content (AA)

Light on dark

Light on dark
Input
{
  "text": "#ffffff",
  "background": "#000000"
}
Output
Text: #ffffff
Background: #000000
APCA Lc: 0
|Lc|: 0
Rating: Fail

── APCA Guidelines ──
Lc ≥ 90: Best for body text (AAA)
Lc ≥ 75: Good for body text (AA)
Lc ≥ 60: Large text only (AA)
Lc ≥ 45: Non-text content (AA)

Navy on light grey

Navy on light grey
Input
{
  "text": "#1a1a2e",
  "background": "#eaeaea"
}
Output
Text: #1a1a2e
Background: #eaeaea
APCA Lc: 93.2
|Lc|: 93.2
Rating: AAA (body text)

── APCA Guidelines ──
Lc ≥ 90: Best for body text (AAA)
Lc ≥ 75: Good for body text (AA)
Lc ≥ 60: Large text only (AA)
Lc ≥ 45: Non-text content (AA)

Use Cases

  • Check apca contrast checker values while you draft a page, spreadsheet, or config.
  • Fill Text Color (hex), Background Color (hex) and compare the result to a second source.
  • Keep sensitive inputs on-device — this page runs the calculation in the browser.

Frequently Asked Questions

Related tools: