Contrast Audit

WCAG 2.1 contrast audit with the maths baked in: for each foreground/background pair the renderer computes the relative luminance and contrast ratio, shows a live sample swatch, and badges AA (4.5:1), AA large (3:1) and AAA (7:1) as pass or fail. Failing pairs get the nearest passing colour, found by mixing the foreground toward black or white in 5% steps until it clears AA. A summary line counts the passes. For an agent composing a surface this is the difference between "looks fine" and "is readable". No JavaScript; light or dark.

Surfaces
webgoogle-meet-stagegoogle-apps-script-webmcp-appspdfandroid
Degraded on
SurfaceNote
google-chatRenders as a plain text card; the typographic layout is lost
Live preview
contrast audit · WCAG 2.1
1 of 1 pass AA
Aa Text
example · #767676 on #ffffff
AA passAA large passAAA fail
4.54:1
Fields
FieldTypeRequired
pairsarray of {fg, bg, label?}. Up to 12 pairs of "#rrggbb" colours; invalid pairs are dropped.optional
fg"#rrggbb". Single-pair shorthand when pairs is absent.optional
bg"#rrggbb". Single-pair shorthand when pairs is absent.optional
labelstring. Label for the single-pair shorthand.optional
show_fixbool. Suggest the nearest passing foreground for failures. Default true.optional
theme"dark" | "light" (optional, default "light")optional
Example payload
{
  "type": "contrast_audit"
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:contrast_audit",
  "displayName": "Contrast Audit",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/contrast_audit",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "pdf",
    "android"
  ],
  "description": "WCAG 2.1 contrast audit with the maths baked in: for each foreground/background pair the renderer computes the relative luminance and contrast ratio, shows a live sample swatch, and badges AA (4.5:1), AA large (3:1) and AAA (7:1) as pass or fail. Failing pairs get the nearest passing colour, found by mixing the foreground toward black or white in 5% steps until it clears AA. A summary line counts the passes. For an agent composing a surface this is the difference between \"looks fine\" and \"is readable\". No JavaScript; light or dark.",
  "representativeQueries": [
    "show a WCAG contrast ratios for colour pairs with AA/AAA badges and a nearest-passing fix",
    "wcag 2.1 contrast audit with the maths baked in: for each foreground/background pair the renderer co",
    "render a contrast audit"
  ]
}
← Full ARD catalog
Deploy your own Google Apps Script renderer

The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.

git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy
Full deploy guide →