Skip to content

Commit 5b8c4d8

Browse files
snapsynapseclaude
snapsynapse
and
claude
committed
fix(a11y): give group badges contrast-safe text color
pa11y-ci (now that it runs) flagged WCAG 2.1 AA 1.4.3 contrast failures on .group-badge chips: white text on the bright dark-mode group colors (technical #4fc3f7 = 2:1, operational #ff6e40 = 2.78:1). Derive each badge's text color from its background's relative luminance (readableTextColor) so chips pass for any configured group color rather than always using white. Regenerated docs/ and demo/, refreshed the build.js hash in MANIFEST.yaml. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent d1f2d58 commit 5b8c4d8

48 files changed

Lines changed: 295 additions & 279 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎MANIFEST.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ files:
7272

7373
- path: scripts/build.js
7474
role: tooling
75-
hash: sha256:8582144782273c2c6cca840912a2fd58d9b5b7c21d9b48eccd874d89f5e89dd0
75+
hash: sha256:fb2934adc10d55633e587b240fa571c34c58e646b228f4b9c70d896bb3469965
7676
note: Static site generator
7777

7878
- path: scripts/validate.js

‎demo/404.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
<meta name="robots" content="noindex">
88
<link rel="stylesheet" href="/assets/styles.css">
99
<style>/* Generated from project.yml — do not edit manually */
10-
.group-badge.governance { background: #7c4dff; }
11-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
10+
.group-badge.governance { background: #7c4dff; color: #fff; }
11+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1212
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1313
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
14-
.group-badge.technical { background: #4fc3f7; }
15-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
14+
.group-badge.technical { background: #4fc3f7; color: #000; }
15+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1616
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1717
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
18-
.group-badge.operational { background: #ff6e40; }
19-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
18+
.group-badge.operational { background: #ff6e40; color: #000; }
19+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2020
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2121
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2222
.status-badge.active { background: #4caf50; color: #000; }

‎demo/about.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/about.html">
99
<link rel="stylesheet" href="assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/applies-to/federal/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/applies-to/federal/">
99
<link rel="stylesheet" href="../../assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/applies-to/international/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/applies-to/international/">
99
<link rel="stylesheet" href="../../assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/authority/iso/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/authority/iso/">
99
<link rel="stylesheet" href="../../assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/authority/nist/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/authority/nist/">
99
<link rel="stylesheet" href="../../assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/compare.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/compare.html">
99
<link rel="stylesheet" href="assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/compare/iso-27001-vs-nist-csf/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/compare/iso-27001-vs-nist-csf/">
99
<link rel="stylesheet" href="../../assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

‎demo/container/iso-27001/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<link rel="canonical" href="https://knowledge-as-code.com/demo/container/iso-27001/">
99
<link rel="stylesheet" href="../../assets/styles.css">
1010
<style>/* Generated from project.yml — do not edit manually */
11-
.group-badge.governance { background: #7c4dff; }
12-
:is(html, body).light-mode .group-badge.governance { background: #4527a0; }
11+
.group-badge.governance { background: #7c4dff; color: #fff; }
12+
:is(html, body).light-mode .group-badge.governance { background: #4527a0; color: #fff; }
1313
.matrix-table .matrix-row-header.group-governance { border-left-color: #7c4dff; }
1414
:is(html, body).light-mode .matrix-table .matrix-row-header.group-governance { border-left-color: #4527a0; }
15-
.group-badge.technical { background: #4fc3f7; }
16-
:is(html, body).light-mode .group-badge.technical { background: #0277bd; }
15+
.group-badge.technical { background: #4fc3f7; color: #000; }
16+
:is(html, body).light-mode .group-badge.technical { background: #0277bd; color: #fff; }
1717
.matrix-table .matrix-row-header.group-technical { border-left-color: #4fc3f7; }
1818
:is(html, body).light-mode .matrix-table .matrix-row-header.group-technical { border-left-color: #0277bd; }
19-
.group-badge.operational { background: #ff6e40; }
20-
:is(html, body).light-mode .group-badge.operational { background: #bf360c; }
19+
.group-badge.operational { background: #ff6e40; color: #000; }
20+
:is(html, body).light-mode .group-badge.operational { background: #bf360c; color: #fff; }
2121
.matrix-table .matrix-row-header.group-operational { border-left-color: #ff6e40; }
2222
:is(html, body).light-mode .matrix-table .matrix-row-header.group-operational { border-left-color: #bf360c; }
2323
.status-badge.active { background: #4caf50; color: #000; }

0 commit comments

Comments
 (0)