使用说明
🎨 颜色可访问性检查器
与ChatGPT集成的应用程序，根据WCAG标准分析颜色的可访问性。
使用 OpenAI应用软件开发工具包 y el 模型上下文协议（MCP） 创建一种互动体验，ChatGPT在其中分析图像并在嵌入式小部件中显示结果。
📋 索引
📖 项目描述
颜色可访问性检查器 它是一种工具，可以验证界面的颜色组合是否符合WCAG（Web内容可访问性指南）可访问性标准。
解决的问题
许多网站设计和应用程序使用颜色组合，使视力障碍或色盲的人难以阅读。手动验证每个颜色组合既繁琐又容易出错。
解决方案
该应用程序允许用户将截图或设计图像上传到ChatGPT，ChatGPT自动：
- 视觉分析 使用其视觉能力的图像
- 提取颜色 检测到的文本和背景
- 计算对比度 根据WCAG
- 显示交互式小部件 结果
- 建议更正 使用OKLCH颜色空间
✨ 特点
| 特征 | 描述 |
|---|---|
| 🔍 视觉分析 | ChatGPT使用您的视觉从任何图像中提取颜色 |
| 📊 WCAG评估 | 验证AA和AAA对普通和大文本的遵守情况 |
| 💡 OKLCH建议 | 产生符合标准的颜色替代品 |
| 🎯 互动小部件 | 直接嵌入ChatGPT的视觉结果 |
| ⚡ 实时 | 无需外部工具即可立即做出反应 |
🏗 建筑
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ │ │ │ │ │
│ Usuario │─────▶│ ChatGPT │─────▶│ MCP Server │
│ (sube imagen) │ │ (Vision) │ │ (FastAPI) │
│ │ │ │ │ │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│ │
│ Extrae colores │ Calcula WCAG
│ hex (#RRGGBB) │ + sugerencias
│ │
▼ ▼
┌──────────────────────────────────────┐
│ │
│ Widget HTML/JS │
│ (embebido en ChatGPT) │
│ │
└──────────────────────────────────────┘
组件
- 前端：HTML/CSS/JS嵌入式小部件使用
text/html+skybridge - 后端：实现MCP协议的Fastapi服务器
- 协议：JSON-RPC 2.0支持HTTP（模型上下文协议）
- 托管：render.com从GitHub自动部署
🔄 操作流程
1. USUARIO 2. CHATGPT 3. SERVIDOR
│ │ │
│ Sube imagen │ │
│ "Analiza accesibilidad" │ │
│ ─────────────────────────▶ │ │
│ │ │
│ │ Ve la imagen │
│ │ Extrae colores: │
│ │ - Título: #333 / #FFF │
│ │ - Botón: #0066CC / #EEE │
│ │ │
│ │ tools/call │
│ │ check_color_accessibility │
│ │ ─────────────────────────▶ │
│ │ │
│ │ │ Calcula ratios
│ │ │ WCAG AA/AAA
│ │ │ Genera sugerencias
│ │ │
│ │ Widget HTML │
│ │ ◀───────────────────────── │
│ │ │
│ Muestra widget │ │
│ ◀───────────────────────── │ │
│ │ │
⚙️ 使用的技术
后端
| 技术 | 版本 | 使用 |
|---|---|---|
| Python | 3.10+ | 主语言 |
| FastAPI | 0.115+ | 框架web/API |
| uvicorn | 0.32+ | 地役权asgi |
| ColoreAide | 1.0+ | 颜色转换OKLCH |
前端
| 技术 | 使用 |
|---|---|
| HTML5 | Widget 结构 |
| CSS3 | 风格与响应性设计 |
| JavaScript | 动态数据呈现 |
基础设施
| 服务 | 使用 |
|---|---|
| 渲染 | 托管del servidor |
| GitHub | 版本控制和CI/CD |
协议
| 协议 | 使用 |
|---|---|
| MCP（模型上下文协议） | 与ChatGPT的通信 |
| JSON-RPC 2.0 | 消息格式 |
💻 安装
先决条件
- Python 3.10以上
- Python包管理器
- Git
步骤
# 1. Clonar el repositorio
git clone https://github.com/Criszoraid/color-accessibility-mcp-app.git
cd color-accessibility-mcp-app
# 2. Crear entorno virtual
python -m venv .venv
# 3. Activar entorno virtual
# En macOS/Linux:
source .venv/bin/activate
# En Windows:
.venv\Scripts\activate
# 4. Instalar dependencias
pip install -r server/requirements.txt
# 5. Ejecutar servidor
cd server
uvicorn main:app --host 0.0.0.0 --port 8000
服务器将在 http://localhost:8000
🚀 使用
ChatGPT配置程序
- 打开 ChatGPT → 设置 ⚙️
- Ve a 连接器 哦 应用
- 添加新的MCP连接器：
Nombre: Color Accessibility URL: https://color-accessibility-mcp-app.onrender.com/mcp - 保存和刷新
分析图像
- 将截图或设计图像上传到ChatGPT
- 托管： “分析此图像颜色的可访问性”
- ChatGPT将以视觉方式提取颜色并显示该小部件：
- 每对颜色的对比度
- WCAG遵守情况（AA/AAA）
- 不符合时的改进建议
对话示例
👤 Usuario: [Sube captura de una web]
"Revisa si los colores de texto son accesibles"
🤖 ChatGPT: Analizando la imagen... He detectado los siguientes
pares de colores:
[Widget interactivo mostrando:]
┌────────────────────────────────────┐
│ 🎨 Color Accessibility Check │
│ │
│ Total: 4 ✅ Passed: 2 ❌ Failed: 2│
│ │
│ ┌──────────────────────────────┐ │
│ │ Título principal │ │
│ │ Aa #333333 / #FFFFFF │ │
│ │ Ratio: 12.63:1 ✅ │ │
│ │ AA ✓ AAA ✓ │ │
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ Texto secundario │ │
│ │ Aa #999999 / #FFFFFF │ │
│ │ Ratio: 2.85:1 ❌ │ │
│ │ 💡 Sugerencias OKLCH: │ │
│ │ darken bg → 4.5:1 │ │
│ └──────────────────────────────┘ │
└────────────────────────────────────┘
📁 项目结构
color-accessibility-mcp-app/
│
├── server/
│ ├── main.py # Servidor FastAPI + lógica MCP
│ └── requirements.txt # Dependencias Python
│
├── render.yaml # Configuración de despliegue en Render
├── README.md # Este archivo
└── LICENSE # Licencia MIT
主要文件： server/main.py
| 功能 | 描述 |
|---|---|
calculate_luminance() |
根据WCAG计算相对亮度 |
calculate_contrast_ratio() |
计算两种颜色之间的对比度 |
evaluate_wcag() |
评估AA和AAA的合规性 |
generate_oklch_suggestions() |
生成替代颜色建议 |
mcp_endpoint() |
处理MCP协议的主要端点 |
🔌 API MCP
工具： check_color_accessibility
分析颜色对并返回WCAG评估。
输入：
{
"color_pairs": [
{
"foreground": "#333333",
"background": "#FFFFFF",
"element": "Título principal"
},
{
"foreground": "#0066CC",
"background": "#F5F5F5",
"element": "Enlace de navegación"
}
]
}
输出：
{
"total_pairs": 2,
"passed_pairs": 1,
"failed_pairs": 1,
"color_pairs": [
{
"text_sample": "Título principal",
"foreground": "#333333",
"background": "#FFFFFF",
"ratio": 12.63,
"passes_aa_normal": true,
"passes_aa_large": true,
"passes_aaa_normal": true,
"passes_aaa_large": true,
"suggestions": []
},
{
"text_sample": "Enlace de navegación",
"foreground": "#0066CC",
"background": "#F5F5F5",
"ratio": 4.12,
"passes_aa_normal": false,
"passes_aa_large": true,
"passes_aaa_normal": false,
"passes_aaa_large": false,
"suggestions": [
{
"type": "darken_bg",
"new_contrast_ratio": 5.2,
"preview_hex_bg": "#E0E0E0",
"preview_hex_fg": "#0066CC"
}
]
}
]
}
🌐 演示
生产服务器：
🔗 https://color-accessibility-mcp-app.onrender.com/
终点MCP：
🔗 https://color-accessibility-mcp-app.onrender.com/mcp
测试小部件：
🔗 https://color-accessibility-mcp-app.onrender.com/widget
📊 WCAG标准
| 级别 | 普通文本 | 大文本 |
|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3.0:1 |
| AAA | ≥ 7.0:1 | ≥ 4.5:1 |
Texto grande：18像素（24像素）或14像素（18.5像素）
👤 作者
克里斯蒂娜·桑切斯
github： @克里索拉德
📄 许可证
这个项目是在麻省理工学院的许可下进行的。看 许可证 更多细节。
