{
  "title": "Contrast checker",
  "human_url": "https://happytails.ai/en/design-tools/contrast-checker/",
  "agent_url": "https://happytails.ai/agents/en/design-tools/contrast-checker/",
  "language": "en",
  "markdown_url": "https://happytails.ai/en/design-tools/contrast-checker.md",
  "content": "Contrast checker\nCompute stated WCAG ratio for foreground/background.\nUseful next steps\nColor picker\nImage upload sampling plus manual color entry.\nHex to RGB\n3/6/8-digit HEX support and explicit alpha interpretation.\nPalette generator\nGenerate from image or seed.\nHow to use Contrast checker\nEnter the values you want to calculate and choose the relevant units or settings.\nThe result updates as you type. Adjust the available settings if needed.\nReview the result, then use Copy result or a download link when available.\nWorking with contrast checker\nDesign utilities help translate colors, dimensions and layout values into reusable settings. A color representation or size calculation is only useful when its units and intended display context are clear.\nCommon questions\nAre colors identical on every display?\nNo. Display calibration, color management and viewing conditions can change appearance. Numeric color conversion does not control those conditions.\nDoes a computed contrast ratio describe the whole design?\nA ratio compares specified foreground and background colors. Transparency, images, font size and other visual choices can change the actual reading experience.\nContinue your workflow:\nColor picker\n,\nHex to RGB\n,\nPalette generator\n.",
  "content_format": "text/plain",
  "visibility": "public",
  "links": [
    {
      "name": "Color picker Image upload sampling plus manual color entry.",
      "url": "https://happytails.ai/en/design-tools/color-picker/"
    },
    {
      "name": "Hex to RGB 3/6/8-digit HEX support and explicit alpha interpretation.",
      "url": "https://happytails.ai/en/design-tools/hex-to-rgb/"
    },
    {
      "name": "Palette generator Generate from image or seed.",
      "url": "https://happytails.ai/en/design-tools/palette-generator/"
    }
  ],
  "tool": {
    "id": "contrast-checker",
    "category": "design-tools",
    "built": true,
    "requirements": "Compute stated WCAG ratio for foreground/background; AA/AAA labels with text-size context.",
    "implementation": {
      "fields": [
        {
          "key": "foreground",
          "label": "Text",
          "value": "#222222",
          "type": "color"
        },
        {
          "key": "background",
          "label": "Background",
          "value": "#ffffff",
          "type": "color"
        }
      ],
      "input": false,
      "experience": {
        "automatic": true,
        "single": false,
        "label": "Your text",
        "placeholder": "Hello world!",
        "help": "Change the input or settings to update your result. Results update as you type. Up to 1,000,000 characters.",
        "action": null
      },
      "mode": "automatic",
      "interactive": false
    },
    "execution": "POST /api/v1/tools/contrast-checker/run",
    "api": {
      "id": "contrast-checker",
      "name": "Contrast checker",
      "category": "design-tools",
      "description": "Compute stated WCAG ratio for foreground/background.",
      "notes": "",
      "human_path": "/en/design-tools/contrast-checker/",
      "method": "POST",
      "endpoint": "/api/v1/tools/contrast-checker/run",
      "schema_url": "/api/v1/tools/contrast-checker",
      "input_schema": {
        "type": "object",
        "additionalProperties": false,
        "properties": {
          "input": {
            "type": "string",
            "maxLength": 1000000,
            "default": "",
            "description": "Plain text input. File tools use files instead unless otherwise documented."
          },
          "options": {
            "type": "object",
            "additionalProperties": false,
            "properties": {
              "foreground": {
                "type": "string",
                "description": "Text",
                "default": "#222222"
              },
              "background": {
                "type": "string",
                "description": "Background",
                "default": "#ffffff"
              }
            }
          }
        }
      },
      "output_schema": {
        "type": "object",
        "required": [
          "tool",
          "result"
        ],
        "properties": {
          "tool": {
            "type": "string"
          },
          "result": {
            "type": "object",
            "required": [
              "text",
              "files"
            ],
            "properties": {
              "text": {
                "type": [
                  "string",
                  "null"
                ]
              },
              "data": {
                "description": "Parsed JSON when the textual result is JSON."
              },
              "name": {
                "type": "string"
              },
              "mime": {
                "type": "string"
              },
              "files": {
                "type": "array",
                "items": {
                  "type": "object",
                  "required": [
                    "name",
                    "mime",
                    "bytes",
                    "base64"
                  ],
                  "properties": {
                    "name": {
                      "type": "string"
                    },
                    "mime": {
                      "type": "string"
                    },
                    "bytes": {
                      "type": "integer"
                    },
                    "base64": {
                      "type": "string",
                      "contentEncoding": "base64"
                    }
                  }
                }
              }
            }
          }
        }
      },
      "processing": "Server; same transformation code as browser tools",
      "limits": {
        "request_bytes": 8388608,
        "input_characters": 1000000,
        "files_bytes": 5242880,
        "max_files": 0,
        "timeout_seconds": 12
      }
    },
    "agent_processing": "Server; same transformation code as browser tools",
    "browser_agent": {
      "supported": true,
      "name": "run_current_tool",
      "discovery": "WebMCP on the human page in a supporting browser",
      "verification": "See audit/API-AUDIT.md; availability is not verification"
    }
  },
  "markdown": "# Contrast checker\n\n- Human page: https://happytails.ai/en/design-tools/contrast-checker/\n- Markdown: https://happytails.ai/en/design-tools/contrast-checker.md\n- Structured JSON: https://happytails.ai/agents/en/design-tools/contrast-checker/index.json\n- Visibility: public\n\n## Tool capabilities\n\n| Property | Value |\n| --- | --- |\n| Tool ID | `contrast-checker` |\n| Category | design-tools |\n| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |\n| Browser execution | Automatic updates after valid input or file selection. |\n| Browser processing | Browser; see tool notes for network behavior. |\n| HTTP API | /api/v1/tools/contrast-checker/run |\n| Browser-agent interface | run_current_tool |\n\n### Inputs and settings\n\nNo free-text input is required. Use the file inputs and/or settings below.\n\n| Setting | Meaning | Control type | Default | Constraints |\n| --- | --- | --- | --- | --- |\n| `foreground` | Text | color | \"#222222\" |  |\n| `background` | Background | color | \"#ffffff\" |  |\n\n### HTTP contract\n\nAPI calls process supplied data on the server. The website origin is `https://happytails.ai`. Server API hosting is not connected on the public website yet. Use your local server origin to test these requests.\n\n```http\nPOST https://happytails.ai/api/v1/tools/contrast-checker/run\nContent-Type: application/json\n```\n\n[Detailed operation reference](https://happytails.ai/en/api/tools/contrast-checker.md) · [Shared API guide](https://happytails.ai/en/api.md)\n\n#### Limits\n\n| Limit | Value |\n| --- | --- |\n| request_bytes | 8388608 |\n| input_characters | 1000000 |\n| files_bytes | 5242880 |\n| max_files | 0 |\n| timeout_seconds | 12 |\n\n#### Complete input schema\n\n```json\n{\n  \"type\": \"object\",\n  \"additionalProperties\": false,\n  \"properties\": {\n    \"input\": {\n      \"type\": \"string\",\n      \"maxLength\": 1000000,\n      \"default\": \"\",\n      \"description\": \"Plain text input. File tools use files instead unless otherwise documented.\"\n    },\n    \"options\": {\n      \"type\": \"object\",\n      \"additionalProperties\": false,\n      \"properties\": {\n        \"foreground\": {\n          \"type\": \"string\",\n          \"description\": \"Text\",\n          \"default\": \"#222222\"\n        },\n        \"background\": {\n          \"type\": \"string\",\n          \"description\": \"Background\",\n          \"default\": \"#ffffff\"\n        }\n      }\n    }\n  }\n}\n```\n\n#### Complete output schema\n\n```json\n{\n  \"type\": \"object\",\n  \"required\": [\n    \"tool\",\n    \"result\"\n  ],\n  \"properties\": {\n    \"tool\": {\n      \"type\": \"string\"\n    },\n    \"result\": {\n      \"type\": \"object\",\n      \"required\": [\n        \"text\",\n        \"files\"\n      ],\n      \"properties\": {\n        \"text\": {\n          \"type\": [\n            \"string\",\n            \"null\"\n          ]\n        },\n        \"data\": {\n          \"description\": \"Parsed JSON when the textual result is JSON.\"\n        },\n        \"name\": {\n          \"type\": \"string\"\n        },\n        \"mime\": {\n          \"type\": \"string\"\n        },\n        \"files\": {\n          \"type\": \"array\",\n          \"items\": {\n            \"type\": \"object\",\n            \"required\": [\n              \"name\",\n              \"mime\",\n              \"bytes\",\n              \"base64\"\n            ],\n            \"properties\": {\n              \"name\": {\n                \"type\": \"string\"\n              },\n              \"mime\": {\n                \"type\": \"string\"\n              },\n              \"bytes\": {\n                \"type\": \"integer\"\n              },\n              \"base64\": {\n                \"type\": \"string\",\n                \"contentEncoding\": \"base64\"\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n#### Error and retry handling\n\nFailures return a non-200 status and `error.code` plus `error.message`. Correct invalid input before retrying; retry server-busy responses with bounded backoff. Returned files contain Base64 data, not persistent download URLs. Decode and inspect the output before treating conversion as successful. See the shared API guide for the complete status and timeout rules.\n\n### Browser-agent workflow\n\n1. Open the human page in a browser that supports WebMCP.\n2. Discover the interface exposed by that page; use its actual schema.\n3. Select files on the page first when the tool requires files.\n4. Call `run_current_tool` with valid input and settings.\n5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.\n\nCalls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.\n\n### Planning specification\n\nCompute stated WCAG ratio for foreground/background; AA/AAA labels with text-size context.\n\nThis describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.\n\n### Complete machine-readable capability record\n\n```json\n{\n  \"id\": \"contrast-checker\",\n  \"category\": \"design-tools\",\n  \"built\": true,\n  \"requirements\": \"Compute stated WCAG ratio for foreground/background; AA/AAA labels with text-size context.\",\n  \"implementation\": {\n    \"fields\": [\n      {\n        \"key\": \"foreground\",\n        \"label\": \"Text\",\n        \"value\": \"#222222\",\n        \"type\": \"color\"\n      },\n      {\n        \"key\": \"background\",\n        \"label\": \"Background\",\n        \"value\": \"#ffffff\",\n        \"type\": \"color\"\n      }\n    ],\n    \"input\": false,\n    \"experience\": {\n      \"automatic\": true,\n      \"single\": false,\n      \"label\": \"Your text\",\n      \"placeholder\": \"Hello world!\",\n      \"help\": \"Change the input or settings to update your result. Results update as you type. Up to 1,000,000 characters.\",\n      \"action\": null\n    },\n    \"mode\": \"automatic\",\n    \"interactive\": false\n  },\n  \"execution\": \"POST /api/v1/tools/contrast-checker/run\",\n  \"api\": {\n    \"id\": \"contrast-checker\",\n    \"name\": \"Contrast checker\",\n    \"category\": \"design-tools\",\n    \"description\": \"Compute stated WCAG ratio for foreground/background.\",\n    \"notes\": \"\",\n    \"human_path\": \"/en/design-tools/contrast-checker/\",\n    \"method\": \"POST\",\n    \"endpoint\": \"/api/v1/tools/contrast-checker/run\",\n    \"schema_url\": \"/api/v1/tools/contrast-checker\",\n    \"input_schema\": {\n      \"type\": \"object\",\n      \"additionalProperties\": false,\n      \"properties\": {\n        \"input\": {\n          \"type\": \"string\",\n          \"maxLength\": 1000000,\n          \"default\": \"\",\n          \"description\": \"Plain text input. File tools use files instead unless otherwise documented.\"\n        },\n        \"options\": {\n          \"type\": \"object\",\n          \"additionalProperties\": false,\n          \"properties\": {\n            \"foreground\": {\n              \"type\": \"string\",\n              \"description\": \"Text\",\n              \"default\": \"#222222\"\n            },\n            \"background\": {\n              \"type\": \"string\",\n              \"description\": \"Background\",\n              \"default\": \"#ffffff\"\n            }\n          }\n        }\n      }\n    },\n    \"output_schema\": {\n      \"type\": \"object\",\n      \"required\": [\n        \"tool\",\n        \"result\"\n      ],\n      \"properties\": {\n        \"tool\": {\n          \"type\": \"string\"\n        },\n        \"result\": {\n          \"type\": \"object\",\n          \"required\": [\n            \"text\",\n            \"files\"\n          ],\n          \"properties\": {\n            \"text\": {\n              \"type\": [\n                \"string\",\n                \"null\"\n              ]\n            },\n            \"data\": {\n              \"description\": \"Parsed JSON when the textual result is JSON.\"\n            },\n            \"name\": {\n              \"type\": \"string\"\n            },\n            \"mime\": {\n              \"type\": \"string\"\n            },\n            \"files\": {\n              \"type\": \"array\",\n              \"items\": {\n                \"type\": \"object\",\n                \"required\": [\n                  \"name\",\n                  \"mime\",\n                  \"bytes\",\n                  \"base64\"\n                ],\n                \"properties\": {\n                  \"name\": {\n                    \"type\": \"string\"\n                  },\n                  \"mime\": {\n                    \"type\": \"string\"\n                  },\n                  \"bytes\": {\n                    \"type\": \"integer\"\n                  },\n                  \"base64\": {\n                    \"type\": \"string\",\n                    \"contentEncoding\": \"base64\"\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n    \"processing\": \"Server; same transformation code as browser tools\",\n    \"limits\": {\n      \"request_bytes\": 8388608,\n      \"input_characters\": 1000000,\n      \"files_bytes\": 5242880,\n      \"max_files\": 0,\n      \"timeout_seconds\": 12\n    }\n  },\n  \"agent_processing\": \"Server; same transformation code as browser tools\",\n  \"browser_agent\": {\n    \"supported\": true,\n    \"name\": \"run_current_tool\",\n    \"discovery\": \"WebMCP on the human page in a supporting browser\",\n    \"verification\": \"See audit/API-AUDIT.md; availability is not verification\"\n  }\n}\n```\n\n## Page guide\n\nCompute stated WCAG ratio for foreground/background.\n\n## Useful next steps\n\n- [Color picker](https://happytails.ai/en/design-tools/color-picker/): Image upload sampling plus manual color entry. ([Markdown](https://happytails.ai/en/design-tools/color-picker.md))\n\n- [Hex to RGB](https://happytails.ai/en/design-tools/hex-to-rgb/): 3/6/8-digit HEX support and explicit alpha interpretation. ([Markdown](https://happytails.ai/en/design-tools/hex-to-rgb.md))\n\n- [Palette generator](https://happytails.ai/en/design-tools/palette-generator/): Generate from image or seed. ([Markdown](https://happytails.ai/en/design-tools/palette-generator.md))\n\n## How to use Contrast checker\n\n1. Enter the values you want to calculate and choose the relevant units or settings.\n2. The result updates as you type. Adjust the available settings if needed.\n3. Review the result, then use Copy result or a download link when available.\n\n## Working with contrast checker\n\nDesign utilities help translate colors, dimensions and layout values into reusable settings. A color representation or size calculation is only useful when its units and intended display context are clear.\n\n## Common questions\n\n### Are colors identical on every display?\n\nNo. Display calibration, color management and viewing conditions can change appearance. Numeric color conversion does not control those conditions.\n\n### Does a computed contrast ratio describe the whole design?\n\nA ratio compares specified foreground and background colors. Transparency, images, font size and other visual choices can change the actual reading experience.\n\nContinue your workflow: [Color picker](https://happytails.ai/en/design-tools/color-picker/), [Hex to RGB](https://happytails.ai/en/design-tools/hex-to-rgb/), [Palette generator](https://happytails.ai/en/design-tools/palette-generator/).\n"
}