phpMyAdmin 本身不提供 WCAG 配色主题，但可通过 CSS 注入 + 对比度校验实现 AA 级合规——关键不是换颜色，而是确保 text-color 与 background-color 的对比度 ≥ 4.5:1。
phpMyAdmin 本身不提供 WCAG 配色主题，但可通过 CSS 注入 + 对比度校验实现 AA 级合规——关键不是换颜色，而是确保 text-color 与 background-color 的对比度 ≥ 4.5:1。
为什么直接改 phpMyAdmin 的 CSS 文件容易失效
phpMyAdmin 的样式由 phpmyadmin.css.php 动态生成，且内联 style 标签和高优先级选择器（如 .header, .nav, .table tbody tr:nth-child(odd)）会覆盖你写的普通 CSS。硬改 themes/pmahomme/css/common.css 后，升级或缓存刷新可能丢失修改。
更稳妥的做法是：在 Apache 或 Nginx 层注入自定义 CSS，或通过浏览器扩展强制加载无障碍样式表。
常见错误现象：
立即学习“PHP免费学习笔记（深入）”；
- 改了
body { background: #C7EDCC; color: #000; }，但输入框仍白底黑字，形成刺眼对比 - 表格行交替色（
#f2f2f2/#ffffff）导致浅灰文字在浅灰背景上不可读 - 按钮禁用态（
opacity: 0.6）进一步降低对比度，跌破 4.5:1
手动注入 WCAG 合规 CSS 的最小可行方案
目标：所有文本（含 input、select、button 内文本）与背景对比度 ≥ 4.5:1，优先满足 AA 级（常规文本）。
推荐使用深灰文字 + 浅豆沙绿背景组合：#333333（文字）与 #C7EDCC（背景）实测对比度为 4.68:1，达标且护眼。
必须覆盖的元素（否则部分区域仍白底）：
html, body, #page_content, .container, .navigation, .tools, .notice-
input, textarea, select, button, .btn的background-color和color -
table th, table td及其 hover/focus 状态 -
iframe内文档（如 SQL 执行结果页）需单独注入，可用document.querySelector('iframe').contentDocument脚本追加
示例片段（保存为 accessibility.css，通过 Apache AddType 或浏览器扩展加载）：
body, html, #page_content {
background-color: #C7EDCC !important;
color: #333333 !important;
}
input, textarea, select, button, .btn {
background-color: #E8F8F0 !important;
color: #333333 !important;
border-color: #A8D8B9 !important;
}
table th, table td {
background-color: #E8F8F0 !important;
color: #333333 !important;
}
如何验证你改的配色真达标
别信肉眼判断，用工具实测。phpMyAdmin 页面结构复杂，需逐区域检查：
- 打开 Chrome DevTools → Elements → 选中任意文本节点 → 右键
Inspect→ 在 Styles 面板底部点「Contrast ratio」查看实时值 - 用
checkContrastCompliance()函数手动校验（来自知识库）：checkContrastCompliance('#C7EDCC', '#333333')返回{ aa: true, aaa: false, level: 'AA' } - 特别注意：禁用按钮（
button:disabled）、SQL 错误提示红字（color: #d32f2f）、以及深色主题切换后是否回退到低对比度
容易被忽略的一点：phpMyAdmin 的「服务器状态」「查询窗口」等 iframe 子页面，其 CSS 是独立加载的，主页面生效 ≠ 全局生效。
