- Fill in Text Color (hex), and Background Color (hex). Each control is labeled; you do not need to paste a JSON blob.
- Click "Run" to run the tool in your browser.
- Read the result below the form and copy it if you need it in another app.
APCA Contrast Checker
Check text contrast using the APCA algorithm.
Output will appear here…
How to Use This Tool
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
Related tools: