完成WACG对比度检测功能。

src/page-components/wacg/Ratio.module.css

@@ -0,0 +1,13 @@
+@layer pages {
+  .ratio_layout {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding: var(--spacing-s) var(--spacing-m);
+    .ratio {
+      font-size: calc(var(--font-size) * 5);
+      font-weight: bold;
+    }
+  }
+}

src/page-components/wacg/Ratio.tsx

@@ -0,0 +1,13 @@
+import styles from './Ratio.module.css';
+
+type ContrastRatioProps = {
+  ratio: number;
+};
+
+export function ContrastRatio({ ratio }: ContrastRatioProps) {
+  return (
+    <div className={styles.ratio_layout}>
+      <div className={styles.ratio}>{ratio.toFixed(2)} : 1</div>
+    </div>
+  );
+}

src/page-components/wacg/TextDemo.module.css

@@ -0,0 +1,46 @@
+@layer pages {
+  .demo_block {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-xxs);
+    padding: var(--spacing-m) var(--spacing-s);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    gap: var(--spacing-s);
+    .normal_text {
+      font-size: 14pt;
+    }
+    .large_text {
+      font-size: 18pt;
+    }
+    .bold_text {
+      font-size: 14pt;
+      font-weight: bold;
+    }
+  }
+  .wacg_rating {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-s);
+    .rating_unit {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--spacing-m);
+    }
+  }
+  .sub_header {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--spacing-m);
+  }
+  .description {
+    font-size: var(--font-size-xs);
+    color: var(--color-neutral-focus);
+  }
+}

src/page-components/wacg/TextDemo.tsx

@@ -0,0 +1,61 @@
+import cx from 'clsx';
+import styles from './TextDemo.module.css';
+
+type TextDemoProps = {
+  fg: string;
+  bg: string;
+  ratio: number;
+};
+
+export function TextDemo({ fg, bg, ratio }: TextDemoProps) {
+  return (
+    <>
+      <header className={styles.sub_header}>
+        <h5>Normal Text</h5>
+        <p className={styles.description}>14pt normal weight text.</p>
+      </header>
+      <div className={styles.demo_block} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
+        <div className={styles.normal_text}>The quick brown fox jumps over the lazy dog.</div>
+        <div className={styles.normal_text}>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
+      </div>
+      <div className={styles.wacg_rating}>
+        <div className={styles.rating_unit}>
+          <span>WACG AA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 4.5 ? 'success' : 'danger')}>
+            {ratio > 4.5 ? 'pass' : 'failed'}
+          </span>
+        </div>
+        <div className={styles.rating_unit}>
+          <span>WACG AAA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 7 ? 'success' : 'danger')}>
+            {ratio > 7 ? 'pass' : 'failed'}
+          </span>
+        </div>
+      </div>
+      <header className={styles.sub_header}>
+        <h5>Large/Bold Text</h5>
+        <p className={styles.description}>18pt normal weight text and 14pt bold text.</p>
+      </header>
+      <div className={styles.demo_block} style={{ backgroundColor: `#${bg}`, color: `#${fg}` }}>
+        <div className={styles.large_text}>The quick brown fox jumps over the lazy dog.</div>
+        <div className={styles.large_text}>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
+        <div className={styles.bold_text}>The quick brown fox jumps over the lazy dog.</div>
+        <div className={styles.bold_text}>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
+      </div>
+      <div className={styles.wacg_rating}>
+        <div className={styles.rating_unit}>
+          <span>WACG AA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 3 ? 'success' : 'danger')}>
+            {ratio > 3 ? 'pass' : 'failed'}
+          </span>
+        </div>
+        <div className={styles.rating_unit}>
+          <span>WACG AAA:</span>
+          <span className={cx('badge', 'uppercase', ratio > 4.5 ? 'success' : 'danger')}>
+            {ratio > 4.5 ? 'pass' : 'failed'}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}