Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators, icons that convey meaning, and graphical objects required to understand content. Does not apply to inactive/disabled UI components or purely decorative elements.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is also difficult for users with low vision, aging eyesight, or those reading in bright sunlight. Insufficient contrast is one of the most common WCAG failures and directly prevents users from reading content they need.
Evaluate the contrast ratio between text color and its background for all text on the page. Use the WCAG relative luminance formula: for normal text (< 18pt or < 14pt bold), the ratio must be ≥ 4.5:1; for large text (≥ 18pt or ≥ 14pt bold), the ratio must be ≥ 3:1. Also check non-text UI components (input borders, button outlines, icons) for ≥ 3:1 ratio against adjacent colors per WCAG 2.1 SC 1.4.11. Check all interactive states: default, hover, focus, active, and visited.
Darken the foreground color or lighten/darken the background color until the ratio meets the minimum. For normal text failing 4.5:1: increase text darkness or background lightness. For large text failing 3:1: apply same approach with a lower threshold. Use a contrast checker tool (WebAIM, browser DevTools accessibility panel) to verify the exact ratio. Do not use opacity to lighten text — compute the effective blended color and check that ratio instead.
WCAG 2.1 SC 1.4.3 (Contrast Minimum, Level AA) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (≥ 18pt regular or ≥ 14pt bold). Contrast ratio is calculated from the relative luminance of the foreground and background colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 is the darker color. A ratio of 1:1 means no contrast (same color); 21:1 is maximum (black on white). Users with low vision, cataracts, or color blindness rely on high contrast to distinguish text from its background.
Review the rendered markup and interactive states that affect Meet minimum color contrast ratios. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/accessibility/color-contrast
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.
日本語の概要は準備中です。原文の説明を表示しています。
Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.
日本語の概要は準備中です。原文の説明を表示しています。
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic table markup for screen readers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
日本語の概要は準備中です。原文の説明を表示しています。