Axcess — Design Accessibility Evaluation

Official3 toolsLive

by sicxz

Evaluates UI designs for WCAG accessibility issues automated scanners miss. Paid via x402 on Base.

io.github.sicxz/axcess Model Context Protocol (MCP) Server

The io.github.sicxz/axcess MCP server evaluates UI designs for WCAG accessibility issues that automated scanners often miss. It provides tooling to run these accessibility evaluations, and the server is described as paid via x402 on Base. The server exposes 3 tools.

🛠️ Key Features

Evaluates UI designs for WCAG accessibility issues
Targets issues that automated scanners miss
Exposes 3 tools

🚀 Use Cases

Assessing UI designs for WCAG accessibility compliance
Catching accessibility problems beyond automated scanner coverage

⚡ Developer Benefits

Integrates accessibility evaluation into an MCP workflow
Provides a dedicated set of 3 tools for UI design checks

⚠️ Limitations

Described as paid via x402 on Base

Captured live from the server via tools/list.

list_capabilities

Returns available evaluation tools, what they check, and their pricing. Call this first to understand what Axcess can evaluate and how much each evaluation costs. This tool is FREE. All evaluation tools require USDC payment on Base network. Returns: JSON with tool descriptions, pricing, and rubric categories.

Parameters

No parameters.

Raw schema

{
  "type": "object",
  "properties": {},
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

evaluate_typography

Evaluates typography elements against a principled accessibility rubric. COST: $0.05 USDC via x402 on Base-compatible EVM network per call. Goes beyond what axe/Lighthouse/WAVE can check — evaluates design judgment, not just numeric compliance. Catches issues like: - Contrast that passes WCAG 4.5:1 but fails visually due to thin font weight - Body text that meets minimum size requirements but is still too small for comfortable reading - Line heights that technically comply but impede readability for dyslexic users - Extended all-caps or italic text that passes all AA criteria but impairs reading - Text on gradient/image backgrounds where scanner sampling is unreliable - Heading sizes that are technically correct but visually indistinct from body Args: - elements: Array of 1–50 typography element objects with font/color properties - screen_name: Optional label for the evaluation report Each element requires: element_type, font_size, font_weight, line_height, color_hex, background_color_hex. Returns: Structured report with: - Per-element scores (0–100) - Specific issues with severity (critical/major/minor) - WCAG references and what automated tools miss - Concrete fix recommendations - Overall score and verdict (pass/needs_work/fail) - Top issues sorted by severity Example use: Extract text layer properties from Figma using get_design_context, pass the typography properties to this tool for evaluation before shipping.

Parameters2

elements	array	required	Array of typography elements to evaluate
screen_name	string	optional	Name of the screen or component being evaluated

Raw schema

{
  "type": "object",
  "properties": {
    "elements": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "element_id": {
            "type": "string",
            "description": "Optional ID for tracking (e.g. Figma node ID)"
          },
          "element_type": {
            "type": "string",
            "enum": [
              "heading",
              "body",
              "caption",
              "label",
              "button",
              "display",
              "ui"
            ],
            "description": "Semantic role of the text element"
          },
          "heading_level": {
            "type": "integer",
            "minimum": 1,
            "maximum": 6,
            "description": "Heading level if element_type is heading (1–6)"
          },
          "font_size": {
            "type": "number",
            "exclusiveMinimum": 0,
            "description": "Font size in px"
          },
          "font_weight": {
            "type": "integer",
            "minimum": 100,
            "maximum": 900,
            "description": "Font weight (100=thin, 400=regular, 700=bold, 900=black)"
          },
          "line_height": {
            "type": "number",
            "exclusiveMinimum": 0,
            "description": "Line height as a multiplier (e.g. 1.5, not px)"
          },
          "letter_spacing": {
            "type": "number",
            "description": "Letter spacing in em (e.g. -0.02 for tight, 0.05 for loose)"
          },
          "text_transform": {
            "type": "string",
            "enum": [
              "none",
              "uppercase",
              "lowercase",
              "capitalize"
            ],
            "description": "CSS text-transform value"
          },
          "font_style": {
            "type": "string",
            "enum": [
              "normal",
              "italic"
            ],
            "description": "CSS font-style"
          },
          "content_length": {
            "type": "integer",
            "minimum": 0,
            "description": "Character count of the actual text content"
          },
          "color_hex": {
            "type": "string",
            "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
            "description": "Text color as hex (e.g. #1a1a1a)"
          },
          "background_color_hex": {
            "type": "string",
            "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
            "description": "Background color as hex (e.g. #ffffff)"
          },
          "background_type": {
            "type": "string",
            "enum": [
              "solid",
              "gradient",
              "image",
              "pattern"
            ],
            "description": "Background type — non-solid backgrounds require special handling"
          },
          "context": {
            "type": "string",
            "description": "Brief description of role in design (e.g. \"hero heading\", \"footer legal copy\")"
          }
        },
        "required": [
          "element_type",
          "font_size",
          "font_weight",
          "line_height",
          "color_hex",
          "background_color_hex"
        ],
        "additionalProperties": false
      },
      "minItems": 1,
      "maxItems": 50,
      "description": "Array of typography elements to evaluate"
    },
    "screen_name": {
      "type": "string",
      "description": "Name of the screen or component being evaluated"
    }
  },
  "required": [
    "elements"
  ],
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

evaluate_accessibility

Evaluates UI elements for accessibility issues that automated scanners miss. COST: $0.01 USDC via x402 on Base-compatible EVM network per call. Checks beyond what axe/Lighthouse/WAVE catch at the design stage: - Touch targets below 24×24px (WCAG 2.5.8 AA hard fail) - Touch targets below 44×44px (WCAG 2.5.5 AAA recommended) - Information conveyed by color alone without a secondary indicator (WCAG 1.4.1) - Missing focus indicators on interactive elements (WCAG 2.4.7) - Focus rings thinner than 2px (WCAG 2.4.11) - Focus ring contrast below 3:1 against adjacent background (WCAG 2.4.11) - Interactive elements below the practical usability height floor Args: - elements: Array of 1–50 UI element objects - screen_name: Optional label for the evaluation report Each element requires: element_type. Provide width_px/height_px for touch target checks. Provide uses_color_only + secondary indicator flags for 1.4.1 checks. Provide is_interactive + focus_visible + focus indicator properties for focus checks. Returns: Structured report with: - Per-element scores (0–100) and specific issues - Severity levels (critical/major/minor) with WCAG references - What automated tools miss and why - Concrete fix recommendations - Overall score and verdict (pass/needs_work/fail) - Top issues sorted by severity

Parameters2

elements	array	required	Array of UI elements to evaluate
screen_name	string	optional	Name of the screen or component being evaluated

Raw schema

{
  "type": "object",
  "properties": {
    "elements": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "element_id": {
            "type": "string",
            "description": "Optional ID for tracking (e.g. Figma node ID)"
          },
          "element_type": {
            "type": "string",
            "enum": [
              "button",
              "link",
              "input",
              "checkbox",
              "radio",
              "select",
              "icon",
              "badge",
              "alert",
              "text",
              "image",
              "navigation",
              "heading"
            ],
            "description": "Semantic role of the UI element"
          },
          "width_px": {
            "type": "number",
            "exclusiveMinimum": 0,
            "description": "Rendered width of the element in px"
          },
          "height_px": {
            "type": "number",
            "exclusiveMinimum": 0,
            "description": "Rendered height of the element in px"
          },
          "color_hex": {
            "type": "string",
            "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
            "description": "Primary element color as hex"
          },
          "background_color_hex": {
            "type": "string",
            "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
            "description": "Background color behind the element as hex"
          },
          "uses_color_only": {
            "type": "boolean",
            "description": "True if color is the only way this element communicates state or meaning"
          },
          "has_text_label": {
            "type": "boolean",
            "description": "True if the element has a visible text label"
          },
          "has_icon_label": {
            "type": "boolean",
            "description": "True if the element has a supplementary icon"
          },
          "has_pattern_or_shape": {
            "type": "boolean",
            "description": "True if the element uses shape or pattern as a secondary indicator"
          },
          "is_interactive": {
            "type": "boolean",
            "description": "True if users can click, tap, or keyboard-navigate this element"
          },
          "focus_visible": {
            "type": "boolean",
            "description": "True if a visible focus indicator is shown in the focused state"
          },
          "focus_indicator_color_hex": {
            "type": "string",
            "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
            "description": "Color of the focus ring/outline as hex"
          },
          "focus_indicator_background_color_hex": {
            "type": "string",
            "pattern": "^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$",
            "description": "Background color immediately behind the focus indicator as hex"
          },
          "focus_indicator_width_px": {
            "type": "number",
            "exclusiveMinimum": 0,
            "description": "Stroke width of the focus outline in px"
          },
          "state": {
            "type": "string",
            "enum": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "error",
              "success"
            ],
            "description": "Interaction state being evaluated"
          },
          "context": {
            "type": "string",
            "description": "Brief description of the element's role (e.g. \"primary CTA\", \"error state badge\")"
          }
        },
        "required": [
          "element_type"
        ],
        "additionalProperties": false
      },
      "minItems": 1,
      "maxItems": 50,
      "description": "Array of UI elements to evaluate"
    },
    "screen_name": {
      "type": "string",
      "description": "Name of the screen or component being evaluated"
    }
  },
  "required": [
    "elements"
  ],
  "additionalProperties": false,
  "$schema": "http://json-schema.org/draft-07/schema#"
}

Install

Tools (3)

list_capabilitiesevaluate_typographyevaluate_accessibility

Remote endpoint

Streamable HTTP

Hosted server - connect over the network, no local install.

url

https://axcess-mcp-server.fly.dev/mcp

Add to VS Code Add to Cursor

claude_desktop_config.json

json

{
  "mcpServers": {
    "axcess": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://axcess-mcp-server.fly.dev/mcp"
      ]
    }
  }
}

Desktop config is stdio-only; this bridges via mcp-remote. Native remote: Settings > Connectors.

io.github.sicxz/axcess Model Context Protocol (MCP) Server

🛠️ Key Features

🚀 Use Cases

⚡ Developer Benefits

⚠️ Limitations

list_capabilities

evaluate_typography

evaluate_accessibility

Install

Remote endpoint

Related servers