Axcess

Axcess — MCP によるタイポグラフィのアクセシビリティ評価

自動スキャナーでは検出できないアクセシビリティ上の問題について、タイポグラフィを評価する有料 MCP サーバーです。

評価ごとに $0.05 USDC · Base メインネット · x402 マイクロペイメント

---

検出できる問題

自動ツール（axe、Lighthouse、WAVE）が検出できる WCAG 違反はおよそ 30％で、デザインの判断を要する問題はほとんど検出できません。Axcess は次の項目を評価します。

• フォントのウェイトを考慮したコントラスト比 — 同じサイズなら、細いフォントには太いフォントより高い比率が必要です
• 本文、キャプション、ラベルの最小フォントサイズ
• 行の高さの適切さ（ディスレクシアのユーザー向けも含む）
• 行の長さ（字数）の読みやすさ — 長すぎる、または短すぎる場合
• 大文字のみのテキストや斜体の長時間使用
• 字間の極端な設定
• グラデーション、画像、パターンを背景にしたテキスト
• 見出しの階層と各レベル間の視覚的な区別
• ディスプレイ書体の拡大率とトラッキング
• WCAG の範囲を超えた、Bringhurst と Lupton のデザイン技法のルール

---

MCP クライアントとして接続する

Claude.ai（ウェブ — Pro／Max／Team／Enterprise）

Settings → Integrations → Add MCP Server

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

Claude Desktop／Cursor（mcp-remote 経由）

claude_desktop_config.json（または Cursor の MCP 設定）に追加します。

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

プログラムから利用する（AI エージェントとスクリプト）

@x402/fetch を使用すると、支払いを自動で処理できます。

import { wrapFetchWithPaymentFromConfig } from '@x402/fetch';
import { ExactEvmScheme } from '@x402/evm/exact/client';
import { privateKeyToAccount } from 'viem/accounts';

const account = privateKeyToAccount(process.env.EVM_PRIVATE_KEY as `0x${string}`);
const fetchWithPayment = wrapFetchWithPaymentFromConfig(fetch, {
  schemes: [{ network: 'eip155:*', client: new ExactEvmScheme(account) }],
});

const response = await fetchWithPayment(
  'https://axcess-mcp-server.fly.dev/mcp',
  {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'accept': 'application/json',
      'mcp-protocol-version': '2025-03-26',
    },
    body: JSON.stringify({
      jsonrpc: '2.0',
      id: 1,
      method: 'tools/call',
      params: {
        name: 'evaluate_typography',
        arguments: {
          screen_name: 'Hero Section',
          elements: [
            {
              element_type: 'heading',
              heading_level: 1,
              font_size: 48,
              font_weight: 300,
              line_height: 1.1,
              color_hex: '#888888',
              background_color_hex: '#ffffff',
            },
          ],
        },
      },
    }),
  }
);

実際に動作する完全な例については、src/scripts/test_paid_tool.ts を参照してください。

---

料金

ツール	料金	ステータス
list_capabilities	無料	利用可能
evaluate_typography	$0.05 USDC	利用可能
evaluate_accessibility	$0.10 USDC	近日公開

支払い： x402 protocol 経由で Base メインネット上の USDC（eip155:8453）。

---

ツール

list_capabilities（無料）

利用可能なツール、料金、評価基準のカテゴリを返します。支払いは不要です。

evaluate_typography（$0.05）

1～50 個のタイポグラフィ要素を評価し、構造化されたアクセシビリティレポートを返します。

入力：

{
  screen_name?: string;          // optional label for the report
  elements: Array<{
    element_id?: string;
    element_type: 'heading' | 'body' | 'caption' | 'label' | 'button' | 'display' | 'ui';
    heading_level?: 1 | 2 | 3 | 4 | 5 | 6;
    font_size: number;           // px
    font_weight: number;         // 100–900
    line_height: number;         // multiplier (e.g. 1.5, not px)
    letter_spacing?: number;     // em units
    text_transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
    font_style?: 'normal' | 'italic' | 'oblique';
    content_length?: number;     // character count
    color_hex: string;           // '#rrggbb'
    background_color_hex: string;
    background_type?: 'solid' | 'gradient' | 'image' | 'pattern' | 'video';
    context?: string;            // e.g. 'hero section', 'navigation'
  }>;
}

出力：

{
  screen_name?: string;
  evaluated_at: string;
  element_evaluations: Array<{
    element_id: string;
    element_type: string;
    issues: Array<{
      criterion_id: string;
      criterion: string;
      severity: 'critical' | 'major' | 'minor';
      wcag_reference: string;
      what_scanners_miss: string;
      finding: string;
      recommendation: string;
      passes_wcag_minimum: boolean;
      passes_design_judgment: boolean;
    }>;
    score: number;              // 0–100
    passes: string[];
  }>;
  summary: {
    overall_score: number;
    verdict: 'pass' | 'needs_work' | 'fail';
    total_issues: number;
    by_severity: { critical: number; major: number; minor: number };
  };
  top_issues: Issue[];
}

---

Fly.io にデプロイする（無料枠）

必要なもの：flyctl、Base 上の USDC ウォレット、無料の CDP API キー

fly auth login
fly launch --name axcess-mcp-server --no-deploy

# Set secrets (never committed to git)
fly secrets set PAYMENT_ADDRESS=0x...
fly secrets set X402_NETWORK=eip155:8453
fly secrets set CDP_API_KEY_ID=...
fly secrets set CDP_API_KEY_SECRET=...

fly deploy

アプリは https://axcess-mcp-server.fly.dev で利用できるようになります。

レジストリに登録する前に、smithery.yaml と上記の接続セクションに記載された URL を更新してください。

ローカルでセルフホストする

必要なもの：Node.js 18+

git clone <repo>
cd axcess-mcp-server
cp .env.example .env
# Edit .env with your PAYMENT_ADDRESS, CDP keys, and X402_NETWORK
npm install
npm run build
npm start

テストネットでのローカル開発（実際の支払いなし）：

PAYMENT_ADDRESS=0x... X402_NETWORK=eip155:84532 npm run dev
EVM_PRIVATE_KEY=0x... npm run test:paid

すべての設定オプションについては、.env.example を参照してください。