.codex-plugin/plugin.json

{
  "name": "contrast-checker",
  "version": "1.0.0",
  "description": "Check WCAG colour contrast, test whole palettes, and generate accessible 50-950 colour scales.",
  "author": {
    "name": "Zovo",
    "email": "support@zovo.one",
    "url": "https://zovo.one"
  },
  "homepage": "https://contrast-checker.zovo.one",
  "license": "Proprietary",
  "keywords": [
    "color contrast checker",
    "contrast checker",
    "wcag contrast checker",
    "contrast ratio",
    "accessible color palette generator",
    "color palette generator from hex",
    "tailwind color palette generator",
    "oklch",
    "apca",
    "accessibility"
  ],
  "skills": "./skills/",
  "mcpServers": "./.mcp.json",
  "interface": {
    "displayName": "Zovo Palette Lab",
    "shortDescription": "WCAG contrast & palettes",
    "longDescription": "A WCAG color contrast checker and accessible color palette generator for designers, front-end developers and accessibility reviewers.\n\nCheck one pair: give a text colour and a background in hex (with or without #), 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) or a CSS colour name. Wide-gamut colours are clipped to sRGB with a note. Zovo Palette Lab returns the computed WCAG 2.x contrast ratio and pass or fail for AA and AAA normal text, large text (24px, or 18.66px bold) and 3:1 for UI components and graphics. Ratios are truncated to two decimals and rounded down, so a ratio of 4.499:1 is shown as 4.49 and fails AA instead of looking like a pass. Translucent text is composited over the background first, the way browsers paint it in sRGB.\n\nWhen a pair fails, it suggests the nearest passing colours for AA and AAA, both darker and lighter, by changing only OKLCH lightness so the hue and chroma of your brand colour stay as close as sRGB allows. Each suggestion comes with its calculated ratio. APCA Lc is shown as secondary, clearly labelled draft information.\n\nCheck a whole palette: 2 to 12 colours become a pairwise contrast matrix showing which combinations work for body text, large text and UI, plus a recommended text colour for each background (a palette colour that passes AA, otherwise black or white).\n\nGenerate an accessible color palette from one hex colour: a 50-950 tonal scale built in OKLCH where 50-400 pass AA with black text, 500 passes AA with both white and black text, 600 passes AA with white text and 700-950 pass AAA with white text. Each step lists its ratios on white and black. Download CSS custom properties (with a Tailwind v4 @theme block) or a Tailwind config JSON, or copy the snippets.\n\nThe interactive view shows live swatches with sample text at real sizes, ratio badges, pass and fail chips, colour pickers that re-run the check, a palette matrix and copy buttons.\n\nLimitations: works with colour values only (it does not read colours from images, screenshots or web pages, resolve CSS variables or currentColor, or rate a gradient as a whole, so check each gradient stop); a contrast ratio is one part of accessibility, not a full conformance audit; APCA is informational only.",
    "developerName": "Zovo",
    "category": "Developer Tools",
    "capabilities": [
      "Interactive",
      "Read"
    ],
    "websiteURL": "https://contrast-checker.zovo.one",
    "supportURL": "https://contrast-checker.zovo.one/support",
    "privacyPolicyURL": "https://contrast-checker.zovo.one/privacy",
    "termsOfServiceURL": "https://contrast-checker.zovo.one/terms",
    "defaultPrompt": [
      "Check if white text on #F59E0B passes WCAG AA for body text and suggest the closest passing color",
      "Generate an accessible 50-950 color palette from #1E6FD9 with CSS variables and a Tailwind config",
      "Check contrast for each pair in this palette: #1E6FD9, #F59E0B, #FFFFFF, #111827, #F3F4F6"
    ],
    "brandColor": "#5B3FD1",
    "brandColorDark": "#A996FF",
    "composerIcon": "./assets/icon.svg",
    "logo": "./assets/logo.png"
  },
  "extensions": {
    "com.openai": {
      "onboardingSkill": "./skills/contrast-checker/SKILL.md",
      "review": {
        "test_cases": {
          "positive": [
            {
              "description": "Single-pair contrast check with a brand-coloured background and suggested fixes",
              "prompt": "Check if white text on #F59E0B passes WCAG AA for body text and suggest the closest passing color",
              "tools_triggered": "check_color_contrast",
              "expected_behavior": "Calls check_color_contrast with foreground=white and background=#F59E0B. Reports a contrast ratio of 2.14:1: AA for normal text fails (needs 4.5:1), large text and UI components (3:1) also fail. Because the background is the more colourful colour, the fixes change the background and keep the white text: AA darker #A76900 at 4.50:1 and AAA darker #7E4E00 at 7.05:1; no lighter background can pass. APCA Lc -46.4 is shown as draft information only. The widget shows the sample text on the amber background, the ratio badge, pass/fail chips and Use/Copy buttons for each fix."
            },
            {
              "description": "Borderline ratio that must not be rounded up to a pass",
              "prompt": "Does #0078D7 text on a white background pass WCAG AA? If not, give me the nearest color that does",
              "tools_triggered": "check_color_contrast",
              "expected_behavior": "Calls check_color_contrast with foreground=#0078D7 and background=white. The ratio is 4.4988, shown as 4.49:1 (truncated, not rounded to 4.50), so AA for normal text FAILS while AA large text and UI components (3:1) pass. The nearest AA fix is #0078D6 at 4.50:1 (OKLCH lightness 0.1 lower, same hue and chroma) and the nearest AAA fix is #005AA4 at 7.00:1."
            },
            {
              "description": "Palette contrast matrix",
              "prompt": "Check contrast for each pair in this palette: #1E6FD9, #F59E0B, #FFFFFF, #111827, #F3F4F6",
              "tools_triggered": "check_palette_contrast",
              "expected_behavior": "Calls check_palette_contrast with the 5 colours. Reports 10 pairs: 3 pass AAA text, 1 passes AA text, 2 pass only large text and UI (3:1), 4 fail. Pairs usable for body text include #FFFFFF + #111827 at 17.73:1 and #1E6FD9 + #FFFFFF at 4.84:1. Recommended text: white #FFFFFF on #1E6FD9 (4.84:1, AA) and #111827 on #F59E0B (8.26:1, AAA). The widget shows the full matrix and a recommended-text tile per background."
            },
            {
              "description": "Accessible 50-950 scale with CSS and Tailwind downloads",
              "prompt": "Generate an accessible 50-950 color palette from #1E6FD9 with CSS variables and a Tailwind config",
              "tools_triggered": "generate_accessible_palette",
              "expected_behavior": "Calls generate_accessible_palette with base_color=#1E6FD9. Returns 11 steps from 50 to 950 in OKLCH with the base hue, each with its ratio on white and on black and its rule marked PASS: for example 500 is #2373DE (4.58:1 on white, 4.57:1 on black), 600 is #0761C9 (5.89:1 on white) and 700 is #004FAA (7.78:1 on white, AAA). It notes that the base #1E6FD9 (4.84:1 on white, 4.33:1 on black) is closest to step 500. Gives a CSS custom properties download (with a Tailwind v4 @theme block) and a Tailwind config JSON download, and the widget has copy buttons for both snippets."
            },
            {
              "description": "Translucent text and a specific font size",
              "prompt": "Is semi-transparent white text rgba(255,255,255,0.6) at 24px on #1E293B readable under WCAG?",
              "tools_triggered": "check_color_contrast",
              "expected_behavior": "Calls check_color_contrast with foreground=rgba(255,255,255,0.6), background=#1E293B and font_size_px=24. The text paints as #A5A9B1 after compositing, contrast 6.22:1. 24px counts as large text, so it passes AA (3:1) and AAA (4.5:1) for that text; for normal-size text it would pass AA but fail AAA (7:1). APCA Lc -52.1 is shown as draft information only."
            }
          ],
          "negative": [
            {
              "description": "Fashion colour matching is out of scope. Expected: no tool call; ChatGPT answers on its own.",
              "prompt": "What colors go with a navy suit?"
            },
            {
              "description": "Image recolouring is out of scope (the tools only compute contrast for colour values). Expected: no tool call.",
              "prompt": "Recolor this photo to black and white"
            },
            {
              "description": "General colour theory history is out of scope. Expected: no tool call; ChatGPT answers without plugin figures.",
              "prompt": "Explain the history of color theory"
            }
          ]
        },
        "commerce": false,
        "commerce_description": "This plugin does not sell products or process payments.",
        "demo_recording_url": "https://contrast-checker.zovo.one/demo.mp4"
      },
      "publication": {
        "countries": [],
        "release_notes": "Initial release: exact WCAG 2.x contrast checks with AA/AAA for text and UI, nearest passing colours in OKLCH, APCA as draft information, palette contrast matrix, and accessible 50-950 scales with CSS and Tailwind downloads.",
        "translations": {
          "pl-PL": {
            "subtitle": "Kontrast WCAG i palety",
            "description": "Sprawdzanie kontrastu kolor\u00f3w wed\u0142ug WCAG i generator dost\u0119pnych palet dla projektant\u00f3w, front-end developer\u00f3w i audytor\u00f3w dost\u0119pno\u015bci. Podaj kolor tekstu i t\u0142a (hex, hex z kana\u0142em alfa, rgb(), hsl(), oklch() lub nazw\u0119 CSS), a otrzymasz dok\u0142adny wsp\u00f3\u0142czynnik kontrastu WCAG 2.x oraz wynik AA i AAA dla zwyk\u0142ego tekstu, du\u017cego tekstu i element\u00f3w interfejsu (3:1). Wsp\u00f3\u0142czynniki s\u0105 obcinane do dw\u00f3ch miejsc po przecinku, nigdy zaokr\u0105glane w g\u00f3r\u0119, wi\u0119c 4,499:1 nie przejdzie AA. Gdy para nie spe\u0142nia wymaga\u0144, narz\u0119dzie proponuje najbli\u017csze kolory spe\u0142niaj\u0105ce AA i AAA (ciemniejsze i ja\u015bniejsze), zmieniaj\u0105c tylko jasno\u015b\u0107 OKLCH. Sprawdza te\u017c ca\u0142e palety (2-12 kolor\u00f3w) w macierzy kontrastu i buduje skale 50-950 z udokumentowanymi krokami AA/AAA, z plikami CSS i konfiguracj\u0105 Tailwind do pobrania. APCA jest pokazywane wy\u0142\u0105cznie informacyjnie."
          },
          "de-DE": {
            "subtitle": "WCAG-Kontrast & Paletten",
            "description": "WCAG-Farbkontrast-Checker und Generator f\u00fcr barrierefreie Farbpaletten f\u00fcr Designer, Frontend-Entwickler und Barrierefreiheits-Pr\u00fcfer. Gib Text- und Hintergrundfarbe an (Hex, Hex mit Alpha, rgb(), hsl(), oklch() oder CSS-Farbnamen) und erhalte das exakte WCAG-2.x-Kontrastverh\u00e4ltnis sowie AA und AAA f\u00fcr normalen Text, gro\u00dfen Text und UI-Elemente (3:1). Werte werden auf zwei Nachkommastellen abgeschnitten, nie aufgerundet: 4,499:1 besteht AA nicht. F\u00e4llt ein Paar durch, schl\u00e4gt das Tool die n\u00e4chstgelegenen Farben f\u00fcr AA und AAA vor (dunkler und heller), indem nur die OKLCH-Helligkeit ge\u00e4ndert wird. Au\u00dferdem pr\u00fcft es ganze Paletten (2-12 Farben) als Kontrastmatrix und erzeugt 50-950-Tonleitern mit dokumentierten AA/AAA-Stufen, als CSS-Variablen und Tailwind-Konfiguration zum Download. APCA wird nur informativ angezeigt."
          },
          "es-ES": {
            "subtitle": "Contraste WCAG y paletas",
            "description": "Comprobador de contraste de color WCAG y generador de paletas accesibles para dise\u00f1adores, desarrolladores front-end y revisores de accesibilidad. Indica el color del texto y del fondo (hex, hex con alfa, rgb(), hsl(), oklch() o un nombre CSS) y obt\u00e9n la relaci\u00f3n de contraste WCAG 2.x exacta y el resultado AA y AAA para texto normal, texto grande y componentes de interfaz (3:1). Las relaciones se truncan a dos decimales y nunca se redondean hacia arriba, as\u00ed que 4,499:1 no aprueba AA. Si una pareja no cumple, sugiere los colores m\u00e1s cercanos que cumplen AA y AAA (m\u00e1s oscuros y m\u00e1s claros) cambiando solo la luminosidad OKLCH. Tambi\u00e9n revisa paletas completas (2-12 colores) en una matriz de contraste y genera escalas 50-950 con pasos AA/AAA documentados, con variables CSS y configuraci\u00f3n de Tailwind para descargar. APCA se muestra solo como informaci\u00f3n."
          },
          "fr-FR": {
            "subtitle": "Contraste WCAG et palettes",
            "description": "V\u00e9rificateur de contraste des couleurs WCAG et g\u00e9n\u00e9rateur de palettes accessibles pour les designers, d\u00e9veloppeurs front-end et auditeurs d'accessibilit\u00e9. Indiquez la couleur du texte et du fond (hex, hex avec alpha, rgb(), hsl(), oklch() ou un nom CSS) pour obtenir le rapport de contraste WCAG 2.x exact et le r\u00e9sultat AA et AAA pour le texte normal, le grand texte et les composants d'interface (3:1). Les rapports sont tronqu\u00e9s \u00e0 deux d\u00e9cimales et jamais arrondis vers le haut : 4,499:1 \u00e9choue au niveau AA. Si une paire \u00e9choue, l'outil propose les couleurs conformes AA et AAA les plus proches (plus sombres et plus claires) en ne modifiant que la luminosit\u00e9 OKLCH. Il v\u00e9rifie aussi des palettes enti\u00e8res (2 \u00e0 12 couleurs) sous forme de matrice et g\u00e9n\u00e8re des gammes 50-950 aux paliers AA/AAA document\u00e9s, avec variables CSS et configuration Tailwind \u00e0 t\u00e9l\u00e9charger. L'APCA est affich\u00e9 \u00e0 titre indicatif uniquement."
          },
          "ja-JP": {
            "subtitle": "WCAG\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u3068\u30d1\u30ec\u30c3\u30c8",
            "description": "\u30c7\u30b6\u30a4\u30ca\u30fc\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u3001\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u62c5\u5f53\u8005\u5411\u3051\u306eWCAG\u30ab\u30e9\u30fc\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u30c1\u30a7\u30c3\u30ab\u30fc\u517c\u30a2\u30af\u30bb\u30b7\u30d6\u30eb\u306a\u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\u751f\u6210\u30c4\u30fc\u30eb\u3067\u3059\u3002\u6587\u5b57\u8272\u3068\u80cc\u666f\u8272\uff08hex\u3001\u30a2\u30eb\u30d5\u30a1\u4ed8\u304dhex\u3001rgb()\u3001hsl()\u3001oklch()\u3001CSS\u306e\u8272\u540d\uff09\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u6b63\u78ba\u306aWCAG 2.x\u306e\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u3068\u3001\u901a\u5e38\u30c6\u30ad\u30b9\u30c8\u30fb\u5927\u304d\u306a\u30c6\u30ad\u30b9\u30c8\u30fbUI\u90e8\u54c1\uff083:1\uff09\u306b\u5bfe\u3059\u308bAA/AAA\u306e\u5408\u5426\u3092\u8fd4\u3057\u307e\u3059\u3002\u6bd4\u306f\u5c0f\u6570\u7b2c2\u4f4d\u3067\u5207\u308a\u6368\u3066\u3001\u5207\u308a\u4e0a\u3052\u306f\u884c\u308f\u306a\u3044\u305f\u3081\u30014.499:1\u306fAA\u4e0d\u5408\u683c\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u4e0d\u5408\u683c\u306e\u5834\u5408\u306f\u3001OKLCH\u306e\u660e\u5ea6\u3060\u3051\u3092\u5909\u3048\u3066\u3001AA\u3068AAA\u3092\u6e80\u305f\u3059\u6700\u3082\u8fd1\u3044\u8272\uff08\u6697\u3044\u65b9\u3068\u660e\u308b\u3044\u65b9\uff09\u3092\u63d0\u6848\u3057\u307e\u3059\u30022\u301c12\u8272\u306e\u30d1\u30ec\u30c3\u30c8\u5168\u4f53\u3092\u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u884c\u5217\u3067\u78ba\u8a8d\u3067\u304d\u30011\u8272\u304b\u308950\u301c950\u306e\u968e\u8abf\u30b9\u30b1\u30fc\u30eb\uff08AA/AAA\u306e\u57fa\u6e96\u3092\u660e\u8a18\uff09\u3092\u4f5c\u6210\u3057\u3001CSS\u5909\u6570\u3068Tailwind\u8a2d\u5b9a\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002APCA\u306f\u53c2\u8003\u60c5\u5831\u3068\u3057\u3066\u306e\u307f\u8868\u793a\u3057\u307e\u3059\u3002"
          },
          "pt-BR": {
            "subtitle": "Contraste WCAG e paletas",
            "description": "Verificador de contraste de cores WCAG e gerador de paletas acess\u00edveis para designers, desenvolvedores front-end e revisores de acessibilidade. Informe a cor do texto e do fundo (hex, hex com alfa, rgb(), hsl(), oklch() ou nome CSS) e receba a raz\u00e3o de contraste WCAG 2.x exata e o resultado AA e AAA para texto normal, texto grande e componentes de interface (3:1). As raz\u00f5es s\u00e3o truncadas em duas casas decimais e nunca arredondadas para cima, ent\u00e3o 4,499:1 n\u00e3o passa no AA. Quando um par falha, sugere as cores mais pr\u00f3ximas que passam em AA e AAA (mais escuras e mais claras), alterando apenas a luminosidade OKLCH. Tamb\u00e9m verifica paletas inteiras (2 a 12 cores) em uma matriz de contraste e gera escalas 50-950 com etapas AA/AAA documentadas, com vari\u00e1veis CSS e configura\u00e7\u00e3o do Tailwind para baixar. O APCA aparece apenas como informa\u00e7\u00e3o."
          }
        }
      }
    }
  },
  "apps": "./.app.json"
}