Catalog/design-accessible-foreground

Design

Suggest accessible text color API

Given a background (and optional preferred text color + WCAG level), returns black/white ratios and an accessible foreground — nudging a preferred color's OKLCH lightness until it meets the target ratio. Answers 'What text color passes WCAG on this background?', 'Make this color accessible.'

Price$0.06per request
MethodPOST
Route/v1/design/accessible-foreground
StatusLive
MIME typeapplication/json
Rate limit120/minute
Cache0s public
accessibilitywcagcontrastforegrounda11ysuggestoklchcolordesign
API URLhttps://x402.hexl.dev/v1/design/accessible-foreground
Integration docs
Example request
{
  "background": "#1d4ed8",
  "level": "AA"
}
Example response
{
  "background": "#1d4ed8",
  "targetRatio": 4.5,
  "level": "AA",
  "large": false,
  "blackText": {
    "hex": "#000000",
    "ratio": 3.13,
    "passes": false
  },
  "whiteText": {
    "hex": "#ffffff",
    "ratio": 6.7,
    "passes": true
  },
  "bestSimple": "#ffffff",
  "preferred": null,
  "suggested": {
    "hex": "#ffffff",
    "ratio": 6.7
  },
  "interpretation": "On #1d4ed8, use #ffffff to meet WCAG AA at 4.5:1."
}
Input schema
{
  "type": "object",
  "required": [
    "background"
  ],
  "properties": {
    "background": {
      "type": "string",
      "examples": [
        "#1d4ed8"
      ]
    },
    "preferred": {
      "type": "string",
      "examples": [
        "#ffff00"
      ]
    },
    "level": {
      "type": "string",
      "enum": [
        "AA",
        "AAA"
      ],
      "examples": [
        "AA"
      ]
    },
    "large": {
      "type": "boolean"
    }
  }
}
Output schema
{
  "type": "object",
  "additionalProperties": true
}