{
  "id": "SC-1.4.5/c02",
  "rulePrefix": "SC-1.4.5",
  "variant": "c02",
  "ruleType": "synthetic-sc",
  "caseTitle": "Heading replaced by background image of text",
  "scanScope": "specimen",
  "synthetic": true,
  "status": "current",
  "title": "Heading rendered as CSS background image of text",
  "summary": "A heading is presented as a CSS background image of text with visible text hidden.",
  "whyItFails": "Users who need to resize or restyle headings cannot because the visible heading is a background image with the real text pushed off-screen.",
  "principles": [
    "perceivable"
  ],
  "guidelines": [
    "1.4"
  ],
  "successCriteria": [
    {
      "id": "1.4.5",
      "name": "Images of Text",
      "level": "AA",
      "slug": "images-of-text"
    }
  ],
  "versions": [
    "2.0",
    "2.1",
    "2.2"
  ],
  "automatable": "partial",
  "requires": [
    "html",
    "css",
    "media"
  ],
  "isolated": true,
  "pairWith": [],
  "w3c": {
    "understanding": [
      "https://www.w3.org/WAI/WCAG22/Understanding/images-of-text"
    ],
    "quickref": [
      "https://www.w3.org/WAI/WCAG22/quickref/#images-of-text"
    ]
  },
  "specimen": {
    "html": "<h2 class=\"sc145c02-heading\">Summer sale</h2>\n<p>The heading above is styled as a background image of text with visible text hidden.</p>",
    "css": ".sc145c02-heading {\n  width: 240px;\n  height: 40px;\n  margin: 0;\n  background: url(/assets/image-of-text.png) no-repeat center / contain;\n  text-indent: -9999px;\n  overflow: hidden;\n}",
    "js": "",
    "assets": [
      "assets/image-of-text.png"
    ]
  },
  "expectedFindings": [
    {
      "sc": "1.4.5",
      "outcome": "fail",
      "note": "Specimen demonstrates an alternate 1.4.5 failure using background-image on a heading."
    }
  ],
  "mustNotFlag": [],
  "manualCheck": "Confirm the heading text could be rendered with real text and CSS instead of a background image.",
  "generated": {
    "url": "https://wcagfail.patternd.io/specimens/SC-1.4.5/c02/",
    "lastmod": "2026-10-08"
  }
}