# WCAG Color Contrast Checker

**Use case:** 

Check foreground and background color pairs against WCAG AA and AAA contrast rules for accessible text and UI design.

## Input

```json
{
  "colorPairs": [
    {
      "foreground": "#000000",
      "background": "#ffffff"
    },
    {
      "foreground": "#767676",
      "background": "#ffffff"
    },
    {
      "foreground": "#ffffff",
      "background": "#0057b8"
    }
  ]
}
```

## Output

```json
{
  "foreground": {
    "label": "Foreground",
    "format": "text"
  },
  "background": {
    "label": "Background",
    "format": "text"
  },
  "contrastRatio": {
    "label": "Ratio",
    "format": "number"
  },
  "aaNormalText": {
    "label": "AA Normal",
    "format": "boolean"
  },
  "aaLargeText": {
    "label": "AA Large",
    "format": "boolean"
  },
  "aaaNormalText": {
    "label": "AAA Normal",
    "format": "boolean"
  },
  "aaaLargeText": {
    "label": "AAA Large",
    "format": "boolean"
  },
  "uiComponents": {
    "label": "AA UI",
    "format": "boolean"
  },
  "error": {
    "label": "Error",
    "format": "text"
  }
}
```

## About this Actor

This example demonstrates how to use [Color Contrast Checker (WCAG)](https://apify.com/automation-lab/color-contrast-checker) with a specific input configuration. Visit the [Actor detail page](https://apify.com/automation-lab/color-contrast-checker) to learn more, explore other use cases, and run it yourself.