Color Contrast Checker (WCAG)

The Color Contrast Checker validates color pairs against WCAG 2.1 accessibility standards. Input foreground/background color pairs in any format and get instant contrast ratios, AA/AAA pass/fail results for normal text, large text, and UI components — no browser, no proxy, pure computation.

Try it now at apify.com/automation-lab/color-contrast-checker.

---

What does Color Contrast Checker do?

The actor accepts a list of foreground/background color pairs, calculates the WCAG 2.1 contrast ratio for each pair, and returns pass/fail results for all four compliance levels:

• AA normal text (≥ 4.5:1) — standard body copy
• AA large text (≥ 3:1) — 18pt+ or 14pt+ bold
• AAA normal text (≥ 7:1) — enhanced accessibility
• AAA large text (≥ 4.5:1) — enhanced for large type
• AA UI components (≥ 3:1) — icons, input borders, charts

Supported input formats: #RRGGBB, #RGB shorthand, rgb(r,g,b), rgba(r,g,b,a), and all named CSS colors (white, navy, rebeccapurple, etc.).

---

Who is Color Contrast Checker for?

UX and UI designers who need to validate accessibility compliance before sign-off:

• Batch-check your entire design system's color palette
• Verify brand colors pass WCAG before shipping
• Generate an exportable compliance report as JSON/CSV/Excel

Front-end developers building accessible web applications:

• Automate accessibility checks in CI/CD pipelines via Apify API
• Check color tokens from design tokens JSON files
• Validate dark mode / light mode color pairs in bulk

Accessibility consultants and auditors reviewing client websites:

• Run hundreds of color pairs through WCAG in seconds
• Schedule nightly checks to catch regressions
• Export results to spreadsheets for client reporting

Design systems teams maintaining component libraries:

• Keep a master list of all approved color combinations
• Check new palette additions against all background variants
• Document which color combinations are AA/AAA certified

---

Why use Color Contrast Checker?

• ✅ Pure computation — instant results — no browser, no proxy, no network calls. 4 color pairs run in under 2 seconds
• ✅ WCAG 2.1 accurate — uses the official relative luminance formula from W3C spec, not approximations
• ✅ All format support — hex, RGB, RGBA, and 140+ named CSS colors in one tool
• ✅ Batch processing — check hundreds of pairs per run, export as JSON/CSV/Excel/Google Sheets
• ✅ API-ready — integrate into your CI/CD workflow, design tooling, or accessibility audit pipeline
• ✅ Graceful error handling — invalid colors are reported with clear error messages, not crashes
• ✅ No API key required — works immediately with your Apify account

---

What data does it output?

Each color pair produces one dataset row:

Field	Type	Description
foreground	string	Original foreground color string from input
background	string	Original background color string from input
foregroundNormalized	string	Foreground normalized to #RRGGBB
backgroundNormalized	string	Background normalized to #RRGGBB
contrastRatio	number	WCAG contrast ratio (1–21, rounded to 2 decimals)
aaNormalText	boolean	AA pass for normal text (≥ 4.5:1)
aaLargeText	boolean	AA pass for large text (≥ 3:1)
aaaNormalText	boolean	AAA pass for normal text (≥ 7:1)
aaaLargeText	boolean	AAA pass for large text (≥ 4.5:1)
uiComponents	boolean	AA pass for UI components/graphics (≥ 3:1)
error	string|null	Parse error for invalid colors, otherwise null

---

How much does it cost to check color contrast?

This actor uses pay-per-event pricing — you pay only for pairs checked. No monthly subscription. All platform costs are included.

	Free	Starter ($29/mo)	Scale ($199/mo)	Business ($999/mo)
Per pair checked	$0.000345	$0.0003	$0.000234	$0.00018
1,000 pairs	$0.35	$0.30	$0.23	$0.18

Plus a flat $0.001 start fee per run (all tiers).

Higher-tier plans get additional volume discounts.

Real-world cost examples:

Scenario	Pairs	Duration	Cost (Free tier)
Quick design check	10	~2s	~$0.004
Design system audit	100	~3s	~$0.036
Full palette matrix	1,000	~5s	~$0.35

Free tier: With Apify's $5 free credits, you can check approximately 14,000+ color pairs for free.

---

How to check WCAG color contrast

1. Go to Color Contrast Checker on Apify Store
2. Click Try for free
3. Enter your color pairs in the Color Pairs field as a JSON array:

   [
       { "foreground": "#000000", "background": "#ffffff" },
       { "foreground": "#767676", "background": "#ffffff" }
   ]
   

4. Click Start and wait 2–5 seconds
5. View results in the Dataset tab — export as CSV, JSON, or Excel

Example inputs for different use cases:

Check your brand colors:

{
    "colorPairs": [
        { "foreground": "#0052cc", "background": "#ffffff" },
        { "foreground": "#ffffff", "background": "#0052cc" },
        { "foreground": "#0052cc", "background": "#f4f5f7" }
    ]
}

Check dark mode variants:

{
    "colorPairs": [
        { "foreground": "#e2e8f0", "background": "#1a202c" },
        { "foreground": "#a0aec0", "background": "#1a202c" },
        { "foreground": "#4a5568", "background": "#1a202c" }
    ]
}

Check named CSS colors:

{
    "colorPairs": [
        { "foreground": "darkblue", "background": "lightyellow" },
        { "foreground": "white", "background": "teal" }
    ]
}

---

Input parameters

Parameter	Type	Required	Default	Description
colorPairs	array	✅	—	Array of {foreground, background} objects. Colors can be #RRGGBB, #RGB, rgb(r,g,b), rgba(r,g,b,a), or named CSS colors

---

Output examples

Passing pair (black on white):

{
    "foreground": "#000000",
    "background": "#ffffff",
    "foregroundNormalized": "#000000",
    "backgroundNormalized": "#ffffff",
    "contrastRatio": 21,
    "aaNormalText": true,
    "aaLargeText": true,
    "aaaNormalText": true,
    "aaaLargeText": true,
    "uiComponents": true,
    "error": null
}

Borderline pair (gray #767676 on white — AA pass, AAA fail):

{
    "foreground": "#767676",
    "background": "#ffffff",
    "foregroundNormalized": "#767676",
    "backgroundNormalized": "#ffffff",
    "contrastRatio": 4.54,
    "aaNormalText": true,
    "aaLargeText": true,
    "aaaNormalText": false,
    "aaaLargeText": true,
    "uiComponents": true,
    "error": null
}

Invalid color (graceful error):

{
    "foreground": "notacolor",
    "background": "#000000",
    "foregroundNormalized": null,
    "backgroundNormalized": null,
    "contrastRatio": null,
    "aaNormalText": null,
    "aaLargeText": null,
    "aaaNormalText": null,
    "aaaLargeText": null,
    "uiComponents": null,
    "error": "Unable to parse color: \"notacolor\". Supported formats: #RRGGBB, #RGB, rgb(r,g,b), named CSS colors."
}

---

Tips for best results

• 🎨 Use consistent notation — all three formats work, but mixing hex and named colors in the same batch is fine
• 📊 Batch all pairs into one run — the actor completes in seconds regardless of size; one run of 1,000 pairs is cheaper than 100 runs of 10 pairs (only one start fee)
• 🔢 WCAG uses flat colors — if your UI uses transparency/opacity, first composite the alpha over the actual background color before checking
• 📋 Export to CSV for spreadsheet review — use the Export button in the Dataset tab or the API
• ⚡ Schedule nightly runs to catch new color regressions after design system updates
• 🔗 Start small — try the 4-pair prefill first to understand the output format before submitting your full palette

---

Integrations

Color Contrast Checker → Google Sheets — Run a batch, export as CSV, import to a shared spreadsheet for design review sign-off. Use Apify's Google Sheets integration for automatic export.

Color Contrast Checker → Zapier/Make — Trigger accessibility checks when designers push color token updates. Route failing pairs to a Slack #accessibility-alerts channel.

Color Contrast Checker → CI/CD pipeline — Call the Apify API in your GitHub Actions workflow after every design token change. Fail the build if any new color pair fails AA.

Scheduled palette monitoring — Schedule weekly runs of your full design system palette. Use webhooks to get notified the moment a new color fails WCAG.

Color Contrast Checker → Airtable — Use Apify's Airtable integration to maintain a live database of all approved color combinations, updated automatically.

---

Using the Apify API

Run the actor programmatically from any language or CI/CD system.

Node.js:

import { ApifyClient } from 'apify-client';

const client = new ApifyClient({ token: 'YOUR_APIFY_TOKEN' });

const run = await client.actor('automation-lab/color-contrast-checker').call({
    colorPairs: [
        { foreground: '#000000', background: '#ffffff' },
        { foreground: '#767676', background: '#ffffff' },
        { foreground: 'white', background: 'navy' },
    ],
});

const { items } = await client.dataset(run.defaultDatasetId).listItems();
for (const item of items) {
    console.log(`${item.foreground} on ${item.background}: ${item.contrastRatio}:1 | AA: ${item.aaNormalText}`);
}

Python:

from apify_client import ApifyClient

client = ApifyClient("YOUR_APIFY_TOKEN")

run = client.actor("automation-lab/color-contrast-checker").call(run_input={
    "colorPairs": [
        {"foreground": "#000000", "background": "#ffffff"},
        {"foreground": "#767676", "background": "#ffffff"},
        {"foreground": "white", "background": "navy"},
    ]
})

for item in client.dataset(run["defaultDatasetId"]).iterate_items():
    print(f"{item['foreground']} on {item['background']}: {item['contrastRatio']}:1 | AA: {item['aaNormalText']}")

cURL:

curl -X POST "https://api.apify.com/v2/acts/automation-lab~color-contrast-checker/runs?token=YOUR_APIFY_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "colorPairs": [
      { "foreground": "#000000", "background": "#ffffff" },
      { "foreground": "#767676", "background": "#ffffff" }
    ]
  }'

---

Use with AI agents via MCP

Color Contrast Checker is available as a tool for AI assistants that support the Model Context Protocol (MCP).

Add the Apify MCP server to your AI client — this gives you access to all Apify actors, including this one:

Setup for Claude Code

$claude mcp add --transport http apify "https://mcp.apify.com"

Setup for Claude Desktop, Cursor, or VS Code

Add this to your MCP config file:

{
    "mcpServers": {
        "apify": {
            "url": "https://mcp.apify.com"
        }
    }
}

Your AI assistant will use OAuth to authenticate with your Apify account on first use.

Example prompts

Once connected, try asking your AI assistant:

• "Use automation-lab/color-contrast-checker to check if my brand colors #0052cc and #ffffff meet WCAG AA"
• "Check these color pairs against WCAG 2.1 AAA: navy on white, darkgray on white, red on white"
• "Run a WCAG audit on my design system colors: foreground #333333, #666666, and #999999, all on background #ffffff"

Learn more in the Apify MCP documentation.

---

Is it legal to use Color Contrast Checker?

This actor performs pure mathematical computation on color values you supply — no web scraping, no data collection, no third-party servers contacted. There are no legal concerns. The WCAG 2.1 formula is a public W3C standard.

All Apify platform usage is subject to Apify's Terms of Service.

---

FAQ

How accurate is the contrast ratio calculation? Highly accurate. The actor implements the exact relative luminance formula from WCAG 2.1 §1.4.3 — the same algorithm used by browser DevTools, axe-core, and the official WebAIM Contrast Checker. Results match WebAIM to within ±0.01 ratio.

How much does it cost for a full design system audit? A typical design system has 20–50 core colors. Checking all pairings (50 × 50 = 2,500 pairs) costs under $0.90 on the Free tier — or about $0.75 on Starter. One run, seconds to complete.

What's the difference between AA and AAA? WCAG defines two conformance levels: AA (minimum accessibility, legally required in many jurisdictions) and AAA (enhanced accessibility). For normal-sized body text: AA requires a 4.5:1 ratio, AAA requires 7:1. For large text (18pt+ or 14pt+ bold): AA requires 3:1, AAA requires 4.5:1.

Does it support transparency / alpha channel? The actor accepts rgba() format but ignores the alpha value. WCAG contrast ratio is always calculated on flat (opaque) colors — if your UI uses semi-transparent colors, composite them against your actual background first, then check the resulting solid color.

Why do some results show null for all fields? This means the color string couldn't be parsed. Check that you're using a supported format: #RRGGBB, #RGB, rgb(r,g,b), rgba(r,g,b,a), or a standard CSS named color. Named colors must be lowercase (e.g., navy not Navy).

Can I use this in automated testing (CI/CD)? Yes — that's a primary use case. Use the Apify API or apify-client npm package to run the actor from GitHub Actions, GitLab CI, or any pipeline. The actor typically completes in 2–5 seconds even for 1,000+ pairs.

---

Other accessibility and utility tools

• Accessibility Checker — Full WCAG audit of live webpages (axe-core powered)
• Base64 Converter — Encode/decode Base64 strings in bulk
• SSL Certificate Checker — Validate SSL certificates and expiry dates
• AAAA Record Checker — Bulk DNS IPv6 record lookup
• Ads.txt Checker — Validate ads.txt files for publisher compliance