Color Contrast
Enforces WCAG 2.2 color contrast requirements across all text and UI component elements in an HTML artifact. Covers SC 1.4.3 (text), SC 1.4.11 (non-text/UI), and SC 2.4.11 (focus ring).
$ aoe install @community/rule-color-contrastProjection
Always in _index.xml · the agent never has to ask for this.
ColorContrast [rule] v1.0.0
Enforces WCAG 2.2 color contrast requirements across all text and UI component elements in an HTML artifact. Covers SC 1.4.3 (text), SC 1.4.11 (non-text/UI), and SC 2.4.11 (focus ring).
Loaded when retrieval picks the atom as adjacent / supporting.
ColorContrast [rule] v1.0.0
Enforces WCAG 2.2 color contrast requirements across all text and UI component elements in an HTML artifact. Covers SC 1.4.3 (text), SC 1.4.11 (non-text/UI), and SC 2.4.11 (focus ring).
Checks
- @community/check-contrast-aa
- @community/check-focus-visible
- @community/check-contrast-ui
Applies To
@community/type-html-artifact
Meta
- License: MPL-2.0 AND Apache-2.0
- License Provenance: legacy-backfill
Severity Combination
any-check fails with severity=block → rule result: BLOCK
any-check fails with severity=warn → rule result: WARN
all checks pass → rule result: PASS
Remediation
- For text contrast failures: adjust foreground color lightness in oklch() — decrease L for dark-on-light, increase L for light-on-dark — until ratio ≥ 4.5:1.
- For UI component contrast failures: ensure icon/border colors achieve 3:1 against adjacent background.
- For focus ring failures: set
outline-colorto a color that achieves 3:1 against both the component and its background. - Use @community/transform-rgb-to-oklch + @community/metric-contrast-ratio to calculate and verify ratios.
Loaded when retrieval picks the atom as a focal / direct hit.
ColorContrast [rule] v1.0.0
Enforces WCAG 2.2 color contrast requirements across all text and UI component elements in an HTML artifact. Covers SC 1.4.3 (text), SC 1.4.11 (non-text/UI), and SC 2.4.11 (focus ring).
Checks
- @community/check-contrast-aa
- @community/check-focus-visible
- @community/check-contrast-ui
Applies To
@community/type-html-artifact
Meta
- License: MPL-2.0 AND Apache-2.0
- License Provenance: legacy-backfill
Severity Combination
any-check fails with severity=block → rule result: BLOCK
any-check fails with severity=warn → rule result: WARN
all checks pass → rule result: PASS
Remediation
- For text contrast failures: adjust foreground color lightness in oklch() — decrease L for dark-on-light, increase L for light-on-dark — until ratio ≥ 4.5:1.
- For UI component contrast failures: ensure icon/border colors achieve 3:1 against adjacent background.
- For focus ring failures: set
outline-colorto a color that achieves 3:1 against both the component and its background. - Use @community/transform-rgb-to-oklch + @community/metric-contrast-ratio to calculate and verify ratios.
Relations
related: [@community/check-contrast-aa, @w3c/fact-wcag-contrast-aa, @community/metric-contrast-ratio, @community/collection-accessible-frontend, @community/anti-pattern-color-only-meaning, @community/counter-example-low-contrast-focus, @community/counter-example-status-color-only, @community/example-accessible-chart, @community/rule-focus-visible]
Applies To
@community/type-html-artifact
Meta
- License: MPL-2.0 AND Apache-2.0
- License Provenance: legacy-backfill
Severity Combination
any-check fails with severity=block → rule result: BLOCK
any-check fails with severity=warn → rule result: WARN
all checks pass → rule result: PASS
Remediation
- For text contrast failures: adjust foreground color lightness in oklch() — decrease L for dark-on-light, increase L for light-on-dark — until ratio ≥ 4.5:1.
- For UI component contrast failures: ensure icon/border colors achieve 3:1 against adjacent background.
- For focus ring failures: set
outline-colorto a color that achieves 3:1 against both the component and its background. - Use @community/transform-rgb-to-oklch + @community/metric-contrast-ratio to calculate and verify ratios.
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-color-contrast/atom.yaml