Reference for WCAG 2.2 color-contrast conformance - covers SC 1.4.3 Contrast (Minimum, AA), 1.4.6 Contrast (Enhanced, AAA), 1.4.11 Non-text Contrast (AA), and 1.4.13 Content on Hover or Focus (AA) - with the canonical contrast ratios (4.5:1 normal text, 3:1 large text and UI components), measurement formula references, and bulk design-token checking patterns. Use when designing a color palette, reviewing a component for accessibility, or auditing existing CSS for contrast violations.
中文简介正在准备中。当前显示原文说明。
实测评分 未实测
查看安装方法安装前可以查看交给 AI 代理的指令内容。
WCAG 2.2 specifies four color-contrast Success Criteria (wcag22):
| SC | Level | What it covers |
|---|---|---|
| 1.4.3 | AA | Text contrast minimums - 4.5:1 normal, 3:1 large. |
| 1.4.6 | AAA | Enhanced text contrast - 7:1 normal, 4.5:1 large. |
| 1.4.11 | AA | Non-text contrast - UI components and graphics - 3:1. |
| 1.4.13 | AA | Content on Hover/Focus - keyboard-dismissable, hoverable, persistent. |
Large text per WCAG 2.2 (wcag22): 18pt+ regular OR 14pt+ bold (24px / 18.66px in browsers default; 19px+ if bold).
screen-reader-test-author references/wcag-checklist.md).axe-a11y.| Text size | Required ratio |
|---|---|
| Normal text (<18pt regular, <14pt bold) | 4.5:1 |
| Large text (≥18pt regular OR ≥14pt bold) | 3:1 |
Exceptions per wcag22:
The enhanced version doubles down: 7:1 normal, 4.5:1 large. Use this for accessibility-first products (educational platforms, public-sector services).
Visual presentation of UI components and graphical objects must have 3:1 contrast against adjacent colors. This applies to:
wcag-keyboard-navigation
SC 2.4.7).Tooltips, dropdowns, and other content that appears on hover/focus must satisfy three conditions:
| Condition | Meaning |
|---|---|
| Dismissable | User can dismiss the additional content without moving pointer or focus (typically: Esc key). |
| Hoverable | If the content appears on hover, the user can move the pointer onto the additional content without dismissing it. |
| Persistent | The additional content remains visible until the user dismisses it, hover/focus moves elsewhere, OR the information is no longer valid. |
Most "tooltip" libraries fail one of these - typically Hoverable (pointer leaves trigger → tooltip dismisses → can't read it).
The WCAG contrast formula uses relative luminance (per wcag22 formula):
ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is the relative luminance of the lighter color and L2
of the darker. Ratios run from 1:1 (identical colors) to 21:1
(black on white).
You don't compute it manually - use a tool:
| Tool | Notes |
|---|---|
| WebAIM Contrast Checker | https://webaim.org/resources/contrastchecker/ |
| Chrome DevTools | Element panel → Styles → color swatch → Contrast. |
| Figma plugins (Stark, Able) | Inline check during design. |
polished (npm) getContrast() | Programmatic check in tests / lint rules. |
axe-core | Reports all on-screen contrast violations during a scan (axe-a11y). |
| Foreground / background | Ratio | Notes |
|---|---|---|
#000000 on #FFFFFF | 21:1 | Maximum. |
#FFFFFF on #000000 | 21:1 | Reversed; same. |
#767676 on #FFFFFF | 4.54:1 | Just passes 4.5:1. |
#999999 on #FFFFFF | 2.85:1 | Fails AA normal text. |
#0000EE (default link) on #FFFFFF | 8.59:1 | Passes AAA. |
The "just-passes" boundary #767676 is a design pitfall - small
font-rendering shifts on Windows ClearType can drop the perceived
contrast below 4.5:1. Aim for ≥5:1 in practice.
When the project has a design-token system (e.g.
--color-text-primary: #1a1a1a), check token combinations
en masse:
// scripts/check-contrast.js
const { getContrast } = require('polished');
const tokens = require('../tokens/colors.json');
const TEXT_PAIRS = [
['--color-text-primary', '--color-bg-default'],
['--color-text-secondary', '--color-bg-default'],
['--color-text-on-primary', '--color-bg-primary'],
['--color-link', '--color-bg-default'],
['--color-error', '--color-bg-default'],
];
const violations = [];
for (const [fg, bg] of TEXT_PAIRS) {
const ratio = getContrast(tokens[fg], tokens[bg]);
if (ratio < 4.5) {
violations.push({ fg, bg, ratio: ratio.toFixed(2) });
}
}
if (violations.length > 0) {
console.error('Contrast violations:', violations);
process.exit(1);
}
Wire into CI per a11y-violation-gate.
| Pattern | Why it fails | Fix |
|---|---|---|
color: #999 on white | 2.85:1 - fails AA. | Darken to #767676 or darker. |
Placeholder text in #aaa | Same problem; placeholders are still text. | Match the disabled-text color used elsewhere; ≥4.5:1 OR remove placeholder reliance and use floating labels. |
| White text on a brand-color button | Many brand colors fail 4.5:1 with pure white. | Darken the brand color OR add a darker tone for hover/active. |
Focus ring #aaa on a #fff background | 2.85:1 - fails SC 1.4.11 (3:1). | Use #666 or darker; or add a 1px outline that contrasts both ways. |
Required-field marker via red-only * | Red on white: ~4:1 - passes - but also color-alone (SC 1.4.1). | Add a non-color cue: text "(required)" or an icon. |
| Disabled button text contrast below 3:1 | Even disabled text should be perceivable. | ~3:1 minimum on disabled; test with users for whether this matches expected interactivity. |
| Anti-pattern | Why it fails | Fix |
|---|---|---|
Designing in pure RGB (#3CB371) without a CIELab-aware tool | Two colors with the same RGB distance can have wildly different luminance ratios. | Use a tool that computes WCAG-formula ratio. |
| Asserting contrast at the token level only | Tokens are correct but actual rendered contrast differs (transparency, pseudo-elements, dark mode). | Bulk-check token pairs AND scan the rendered DOM via axe-core. |
| Single-mode token check | Light-mode pairs pass but dark-mode pairs fail. | Check every theme variant. |
Using opacity / rgba for subtle text | The browser blends; perceived contrast against the background is whatever the blended result computes to - often below threshold. | Compute the blended color first; check that. |
wcag-keyboard-navigation - for SC 2.4.7 focus-indicator contrast.axe-a11y - runtime contrast checker.a11y-violation-gate -
CI gate for contrast (and other) violations.还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Builds a CI gate that fails the build on **new** WCAG / a11y violations introduced by a PR while grandfathering pre-existing violations on a per-rule / per-page baseline. Aggregates verdicts from axe-core / pa11y / Lighthouse a11y / WAVE / IBM Equal Access scans. Use when a project has accumulated a11y debt and a strict "zero violations" gate would block every PR - the ratchet pattern lets the team ship while preventing regressions.
中文简介正在准备中。当前显示原文说明。
Workflow skill that builds an A/B-test validity checklist from an experiment proposal, walking the canonical design-correctness gates - pre-registered OEC/power/guardrails, randomization unit + SRM check, assignment integrity, telemetry, peeking discipline, novelty/primacy, post-experiment SRM re-check - into a per-experiment checklist + sign-off form. Use when launching, auditing, or governing an experiment. For pitfall mechanics (guardrails, peeking) see experiment-results-interpreter's references; to read an already-valid result use experiment-results-interpreter; for per-SDK harness tests use experiment-sdk-testing - this gates DESIGN, not SDK code.
中文简介正在准备中。当前显示原文说明。
The single install-flow skill: the reference contract for the PWA install flow (installability gate fields, `beforeinstallprompt` handshake, per-platform paths - Android WebAPK / iOS Share menu / Firefox no-op - and the `display-mode` post-install signal, in references/install-flow-reference.md) plus the build-an-X workflow that emits the Add-to-Home-Screen suite. Walks the four-stage timeline, emitting one test per gate cell per [web.dev/articles/install-criteria][install-criteria], the deferred-prompt → `prompt()` → `userChoice` chain per [web.dev/articles/customize-install][customize-install], the iOS Safari manual-metadata branch (`apple-touch-icon`) per [web.dev/learn/pwa/installation][learn-pwa], and the post-install `(display-mode: standalone)` MQ assertion. Output: a Playwright spec with per-stage cells plus a coverage matrix. Use when a PWA's manifest, icons, or install handler change, when install conversion drops at an unknown stage, or when triaging a flaky install assertion.
中文简介正在准备中。当前显示原文说明。
Build-an-X workflow that uses an LLM to map existing tests to spec sections - given a spec doc + the test suite, the LLM identifies which tests cover which sections, surfaces uncovered sections (gap), and recommends specific tests to add. Output is a coverage matrix per spec ID. Scope is mapping tests that already exist and naming the gaps, not authoring tests for new acceptance criteria. Use when a spec doc and a test suite both exist but nobody can say which requirements are actually covered - before a release sign-off, an audit, or a decision about where to spend the next round of test effort.
中文简介正在准备中。当前显示原文说明。
Generates tests from natural-language specs (acceptance criteria, user stories, requirements) using an LLM, with confidence scoring per test case (LLM self-assessment plus heuristics: assertion quality, naming, completeness), batching uncertain cases for human review, and integration with the team's existing test framework. Use when the user asks to generate unit tests from acceptance criteria, convert user stories to test cases, automate test creation from requirements, or augment a spec-driven test suite with AI-generated stubs that are then curated before merge.
中文简介正在准备中。当前显示原文说明。
Configures Allure Report (test-runner adapter install, `allure-results` directory wiring, `categories.json` for failure classification, `history-trend.json` retention via the copy-history-between-runs pattern), runs the Allure CLI to convert `allure-results` to a static HTML site, and uploads the report as a CI artifact. Use when the team needs richer test reporting than JUnit XML - step-level attachments, per-test history, retry tracking, and severity / epic / feature labeling across framework-agnostic adapters (pytest, Jest, JUnit, TestNG, NUnit, Mocha). As a rich static HTML report generator, it is the open-source alternative to the sunset ExtentReports (JVM/.NET per-test HTML narrative); for hosted cross-run flakiness analytics rather than a static per-run report use currents-integration.
中文简介正在准备中。当前显示原文说明。