@jjlmoya/utils-developer 1.2.0

package/src/tool/readabilityCalculator/component.astro

@@ -0,0 +1,534 @@
+---
+import type { ReadabilityCalculatorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as ReadabilityCalculatorUI;
+---
+
+<div id="rc-root" class="rc-root" data-i18n={JSON.stringify(t)}>
+  <div class="rc-container">
+    <div class="rc-card rc-left">
+      <div class="rc-control-section">
+        <div class="rc-group-title">{t.labelColors}</div>
+        <div class="rc-inputs-grid">
+          <div class="rc-input-wrapper">
+            <label class="rc-label-mini">{t.labelText}</label>
+            <div class="rc-color-input-container">
+              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" />
+              <span id="rc-text-hex" class="rc-hex-text">#1E293B</span>
+            </div>
+          </div>
+          <div class="rc-input-wrapper">
+            <label class="rc-label-mini">{t.labelBg}</label>
+            <div class="rc-color-input-container">
+              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" />
+              <span id="rc-bg-hex" class="rc-hex-text">#FFFFFF</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="rc-group-title">{t.labelTypo}</div>
+        <div class="rc-sliders-stack">
+          <div class="rc-slider-group">
+            <div class="rc-slider-header">
+              <label class="rc-label-mini">{t.labelFontSize}</label>
+              <span id="rc-size-val" class="rc-slider-value">16px</span>
+            </div>
+            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" />
+          </div>
+          <div class="rc-slider-group">
+            <div class="rc-slider-header">
+              <label class="rc-label-mini">{t.labelFontWeight}</label>
+              <span id="rc-weight-val" class="rc-slider-value">400</span>
+            </div>
+            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" />
+          </div>
+        </div>
+
+        <div class="rc-group-title">{t.labelCompare}</div>
+        <div class="rc-comparison-grid">
+          <div class="rc-score-card">
+            <span class="rc-score-label">{t.wcagRatioLabel}</span>
+            <span id="rc-wcag-ratio" class="rc-score-value">21.00</span>
+            <span id="rc-wcag-status" class="rc-score-status rc-status-pass">{t.wcagAAA}</span>
+          </div>
+          <div class="rc-score-card">
+            <span class="rc-score-label">{t.apcaLcLabel}</span>
+            <span id="rc-apca-lc" class="rc-score-value">100</span>
+            <span id="rc-apca-status" class="rc-score-status rc-status-pass">{t.apcaExcellent}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="rc-card rc-right">
+      <div class="rc-preview-container">
+        <div class="rc-group-title">{t.labelPreview}</div>
+        <div id="rc-preview-box" class="rc-main-preview-box">
+          <p id="rc-preview-text" class="rc-preview-text">{t.previewText}</p>
+        </div>
+
+        <div class="rc-apca-breakdown">
+          <div class="rc-group-title rc-group-title-sm">{t.labelApcaRecs}</div>
+          <div class="rc-breakdown-list">
+            <div class="rc-breakdown-item">
+              <span class="rc-item-label">{t.labelBody}</span>
+              <span id="rc-apca-body" class="rc-item-check rc-check-yes"></span>
+            </div>
+            <div class="rc-breakdown-item">
+              <span class="rc-item-label">{t.labelSmall}</span>
+              <span id="rc-apca-small" class="rc-item-check rc-check-yes"></span>
+            </div>
+            <div class="rc-breakdown-item">
+              <span class="rc-item-label">{t.labelUi}</span>
+              <span id="rc-apca-ui" class="rc-item-check rc-check-yes"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .rc-root {
+    width: 100%;
+  }
+
+  .rc-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1.5rem;
+  }
+
+  @media (min-width: 1024px) {
+    .rc-container {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .rc-card {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: 1.5rem;
+    padding: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  }
+
+  :global(.theme-dark) .rc-card {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
+  }
+
+  .rc-control-section {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .rc-group-title {
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: rgb(100, 116, 139);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 1rem;
+  }
+
+  .rc-group-title-sm {
+    margin-bottom: 0.75rem;
+  }
+
+  :global(.theme-dark) .rc-group-title {
+    color: rgb(148, 163, 184);
+  }
+
+  .rc-inputs-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+
+  .rc-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .rc-label-mini {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: rgb(30, 41, 59);
+  }
+
+  :global(.theme-dark) .rc-label-mini {
+    color: rgb(241, 245, 249);
+  }
+
+  .rc-color-input-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgb(226, 232, 240);
+    padding: 0.5rem;
+    border-radius: 0.75rem;
+    transition: all 0.2s ease;
+  }
+
+  :global(.theme-dark) .rc-color-input-container {
+    background: rgba(30, 41, 59, 0.5);
+    border-color: rgb(51, 65, 85);
+  }
+
+  .rc-color-picker {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    background: none;
+  }
+
+  .rc-color-picker::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  .rc-color-picker::-webkit-color-swatch {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 0.4rem;
+  }
+
+  :global(.theme-dark) .rc-color-picker::-webkit-color-swatch {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .rc-hex-text {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: rgb(71, 85, 105);
+    flex: 1;
+  }
+
+  :global(.theme-dark) .rc-hex-text {
+    color: rgb(148, 163, 184);
+  }
+
+  .rc-sliders-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .rc-slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .rc-slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .rc-slider-value {
+    background: rgb(14, 165, 233);
+    color: rgb(255, 255, 255);
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.15rem 0.5rem;
+    border-radius: 1rem;
+  }
+
+  .rc-range {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 6px;
+    background: rgb(226, 232, 240);
+    border-radius: 3px;
+    outline: none;
+  }
+
+  :global(.theme-dark) .rc-range {
+    background: rgb(51, 65, 85);
+  }
+
+  .rc-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: rgb(14, 165, 233);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
+    transition: all 0.2s ease;
+  }
+
+  .rc-range::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.2);
+  }
+
+  .rc-comparison-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+
+  .rc-score-card {
+    padding: 1.25rem;
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.theme-dark) .rc-score-card {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .rc-score-label {
+    font-size: 0.65rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    color: rgb(100, 116, 139);
+    text-align: center;
+  }
+
+  .rc-score-value {
+    font-size: 1.5rem;
+    font-weight: 800;
+  }
+
+  .rc-score-status {
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.2rem 0.6rem;
+    border-radius: 0.5rem;
+    text-transform: uppercase;
+  }
+
+  .rc-status-pass {
+    background: rgb(220, 252, 231);
+    color: rgb(22, 101, 52);
+  }
+
+  .rc-status-fail {
+    background: rgb(254, 226, 226);
+    color: rgb(153, 27, 27);
+  }
+
+  :global(.theme-dark) .rc-status-pass {
+    background: rgba(34, 197, 94, 0.15);
+    color: rgb(134, 239, 172);
+  }
+
+  :global(.theme-dark) .rc-status-fail {
+    background: rgba(239, 68, 68, 0.15);
+    color: rgb(252, 165, 165);
+  }
+
+  .rc-preview-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .rc-main-preview-box {
+    padding: 2.5rem;
+    border-radius: 1.25rem;
+    transition: all 0.3s ease;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    min-height: 160px;
+    display: flex;
+    align-items: center;
+  }
+
+  .rc-preview-text {
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .rc-apca-breakdown {
+    background: rgba(14, 165, 233, 0.05);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid rgba(14, 165, 233, 0.1);
+  }
+
+  .rc-breakdown-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .rc-breakdown-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.875rem;
+  }
+
+  .rc-item-label {
+    color: rgb(71, 85, 105);
+    font-weight: 600;
+  }
+
+  :global(.theme-dark) .rc-item-label {
+    color: rgb(148, 163, 184);
+  }
+
+  .rc-item-check {
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .rc-check-yes {
+    color: rgb(16, 185, 129);
+  }
+
+  .rc-check-no {
+    color: rgb(239, 68, 68);
+  }
+</style>
+
+<script>
+  import type { ReadabilityCalculatorUI } from './ui';
+
+  const root = document.getElementById('rc-root')!;
+  const t = JSON.parse(root.dataset.i18n ?? '{}') as ReadabilityCalculatorUI;
+
+  const textColorInput = document.getElementById('rc-text-color') as HTMLInputElement;
+  const bgColorInput = document.getElementById('rc-bg-color') as HTMLInputElement;
+  const sizeSlider = document.getElementById('rc-size-slider') as HTMLInputElement;
+  const weightSlider = document.getElementById('rc-weight-slider') as HTMLInputElement;
+  const textHexEl = document.getElementById('rc-text-hex') as HTMLElement;
+  const bgHexEl = document.getElementById('rc-bg-hex') as HTMLElement;
+  const sizeValEl = document.getElementById('rc-size-val') as HTMLElement;
+  const weightValEl = document.getElementById('rc-weight-val') as HTMLElement;
+  const wcagRatioEl = document.getElementById('rc-wcag-ratio') as HTMLElement;
+  const wcagStatusEl = document.getElementById('rc-wcag-status') as HTMLElement;
+  const apcaLcEl = document.getElementById('rc-apca-lc') as HTMLElement;
+  const apcaStatusEl = document.getElementById('rc-apca-status') as HTMLElement;
+  const previewBox = document.getElementById('rc-preview-box') as HTMLElement;
+  const previewText = document.getElementById('rc-preview-text') as HTMLElement;
+  const apcaBodyEl = document.getElementById('rc-apca-body') as HTMLElement;
+  const apcaSmallEl = document.getElementById('rc-apca-small') as HTMLElement;
+  const apcaUiEl = document.getElementById('rc-apca-ui') as HTMLElement;
+
+  const svgYes = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgb(16,185,129)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+  const svgNo = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgb(239,68,68)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
+
+  function hexToRgb(hex: string): { r: number; g: number; b: number } {
+    return { r: parseInt(hex.slice(1, 3), 16), g: parseInt(hex.slice(3, 5), 16), b: parseInt(hex.slice(5, 7), 16) };
+  }
+
+  function getLuminance(r: number, g: number, b: number): number {
+    const lin = (v: number) => { const n = v / 255; return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4); };
+    return lin(r) * 0.2126 + lin(g) * 0.7152 + lin(b) * 0.0722;
+  }
+
+  function calcWCAG(lum1: number, lum2: number): number {
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+  }
+
+  function sRGBtoY(r: number, g: number, b: number): number {
+    return Math.pow(r / 255, 2.4) * 0.2126729 + Math.pow(g / 255, 2.4) * 0.7151522 + Math.pow(b / 255, 2.4) * 0.072175;
+  }
+
+  function calcAPCA(textHex: string, bgHex: string): number {
+    const tr = hexToRgb(textHex); const br = hexToRgb(bgHex);
+    const Ytxt = sRGBtoY(tr.r, tr.g, tr.b); const Ybg = sRGBtoY(br.r, br.g, br.b);
+    const scale = 1.14;
+    const contrast = Ybg > Ytxt
+      ? (Math.pow(Ybg, 0.88) - Math.pow(Ytxt, 0.56)) * scale
+      : (Math.pow(Ybg, 0.56) - Math.pow(Ytxt, 0.88)) * scale;
+    return Math.round(Math.abs(contrast) * 100);
+  }
+
+  function setCheck(el: HTMLElement, ok: boolean): void {
+    el.innerHTML = `${ok ? svgYes : svgNo} ${ok ? t.statusYes : t.statusNo}`;
+    el.className = `rc-item-check ${ok ? 'rc-check-yes' : 'rc-check-no'}`;
+  }
+
+  function getWcagStatus(ratio: number): { text: string; pass: boolean } {
+    if (ratio >= 7) return { text: t.wcagAAA, pass: true };
+    if (ratio >= 4.5) return { text: t.wcagAA, pass: true };
+    if (ratio >= 3) return { text: t.wcagLarge, pass: true };
+    return { text: t.wcagFail, pass: false };
+  }
+
+  function getApcaStatus(lc: number): { text: string; pass: boolean } {
+    if (lc >= 75) return { text: t.apcaExcellent, pass: true };
+    if (lc >= 60) return { text: t.apcaGood, pass: true };
+    if (lc >= 45) return { text: t.apcaMinimal, pass: true };
+    return { text: t.apcaPoor, pass: false };
+  }
+
+  function update(): void {
+    const textHex = textColorInput.value;
+    const bgHex = bgColorInput.value;
+    const size = parseInt(sizeSlider.value);
+    const weight = parseInt(weightSlider.value);
+
+    textHexEl.textContent = textHex.toUpperCase();
+    bgHexEl.textContent = bgHex.toUpperCase();
+    sizeValEl.textContent = `${size}px`;
+    weightValEl.textContent = weight.toString();
+
+    const tc = hexToRgb(textHex); const bc = hexToRgb(bgHex);
+    const ratio = calcWCAG(getLuminance(tc.r, tc.g, tc.b), getLuminance(bc.r, bc.g, bc.b));
+    wcagRatioEl.textContent = ratio.toFixed(2);
+
+    const ws = getWcagStatus(ratio);
+    wcagStatusEl.textContent = ws.text;
+    wcagStatusEl.className = `rc-score-status ${ws.pass ? 'rc-status-pass' : 'rc-status-fail'}`;
+
+    const Lc = calcAPCA(textHex, bgHex);
+    apcaLcEl.textContent = Lc.toString();
+
+    const as_ = getApcaStatus(Lc);
+    apcaStatusEl.textContent = as_.text;
+    apcaStatusEl.className = `rc-score-status ${as_.pass ? 'rc-status-pass' : 'rc-status-fail'}`;
+
+    previewBox.style.backgroundColor = bgHex;
+    previewText.style.color = textHex;
+    previewText.style.fontSize = `${size}px`;
+    previewText.style.fontWeight = weight.toString();
+
+    setCheck(apcaBodyEl, Lc >= 60 && size >= 14);
+    setCheck(apcaSmallEl, Lc >= 75 && size >= 12);
+    setCheck(apcaUiEl, Lc >= 45);
+  }
+
+  [textColorInput, bgColorInput, sizeSlider, weightSlider].forEach((el) => {
+    el.addEventListener('input', update);
+  });
+
+  update();
+</script>

package/src/tool/readabilityCalculator/i18n/en.ts

@@ -0,0 +1,133 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ReadabilityCalculatorUI } from '../ui';
+
+const slug = 'visual-readability-calculator-wcag-apca';
+const title = 'Visual Readability Calculator WCAG and APCA';
+const description = 'Check the real contrast of your designs with APCA (WCAG 3.0). Analyze how font weight and size affect actual readability. From simple ratios to perceptual legibility.';
+
+const faqData = [
+  {
+    question: 'What is APCA and why is it different from WCAG 2.1?',
+    answer: 'APCA is the Advanced Perceptual Contrast Algorithm developed for WCAG 3.0. Unlike the old simple ratio, APCA uses mathematical models that mimic how the human brain perceives contrast, taking into account polarity (light vs. dark background) and font size/weight.',
+  },
+  {
+    question: 'What does the Lc value mean?',
+    answer: 'Lc (Lightness Contrast) is the contrast value generated by APCA. A value of 100 represents ideal maximum contrast, while values below 60 start to be critical for continuous reading text. It is an absolute magnitude scale of perception.',
+  },
+  {
+    question: 'How does font weight affect readability?',
+    answer: 'Thin/Light fonts require much higher contrast to be readable. APCA penalizes low-weight fonts, indicating that a design passing WCAG with a weight-100 font may be illegible in practice.',
+  },
+  {
+    question: 'Is this calculator private?',
+    answer: 'Yes, all calculations are performed locally in your browser. The colors and settings you analyze are never sent to any server, guaranteeing full privacy for your design projects.',
+  },
+];
+
+const howToData = [
+  { name: 'Choose Colors', text: 'Use the color pickers to set the text color and background color of your design.' },
+  { name: 'Adjust Typography', text: 'Move the font size and weight sliders to simulate your actual typography.' },
+  { name: 'Read the Results', text: 'Check the WCAG 2.1 ratio and the APCA Lc value to know if your design is accessible.' },
+  { name: 'Review Recommendations', text: 'Check APCA-specific recommendations for body text, small text and UI elements.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
+const ui: ReadabilityCalculatorUI = {
+  labelColors: 'Base Colors',
+  labelText: 'Text',
+  labelBg: 'Background',
+  labelTypo: 'Typography',
+  labelFontSize: 'Font Size',
+  labelFontWeight: 'Weight',
+  labelCompare: 'Contrast Comparison',
+  labelPreview: 'Perceptual Preview',
+  labelApcaRecs: 'APCA Recommendations',
+  labelBody: 'Reading Text (Body)',
+  labelSmall: 'Small Text / Caption',
+  labelUi: 'UI / Buttons',
+  statusYes: 'Yes',
+  statusNo: 'No',
+  wcagAAA: 'Passes AAA',
+  wcagAA: 'Passes AA',
+  wcagLarge: 'Large Text Only',
+  wcagFail: 'Fails',
+  apcaExcellent: 'Excellent',
+  apcaGood: 'Good',
+  apcaMinimal: 'Minimal',
+  apcaPoor: 'Poor',
+  previewText: 'Visual readability is not just mathematics. It is how light and shadow interact with your eyes.',
+  wcagRatioLabel: 'WCAG 2.1 Ratio',
+  apcaLcLabel: 'APCA Lc (WCAG 3)',
+};
+
+export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'Resources on Contrast and APCA',
+  bibliography: [
+    { name: 'W3C: WCAG 3.0 Draft (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
+    { name: 'Myndex: APCA Reference Guide', url: 'https://apcaw3.myndex.com/' },
+    { name: 'MDN: Accessibility and Color Contrast', url: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Visual Readability Calculator (WCAG vs APCA)', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Understand how your colors and typography affect actual reading with the new perceptual accessibility standard. WCAG 2.1 uses a simple 2008 mathematical formula. <strong>APCA</strong> is the new model proposed for <strong>WCAG 3.0</strong> that mimics human perception.',
+    },
+    { type: 'title', text: 'Key Points of APCA', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Polarity:</strong> Understands that Dark Mode is perceived differently than Light Mode.',
+        '<strong>Font Weight:</strong> Assigns specific contrast levels (Lc) based on typography weight.',
+        '<strong>Linearity:</strong> Fixes mathematical inaccuracies in the 2008 relative luminance model.',
+      ],
+    },
+    { type: 'title', text: 'Recommended APCA Levels', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Lc 90+:</strong> Ideal for very small or low-weight text.',
+        '<strong>Lc 75:</strong> The standard for main body reading text.',
+        '<strong>Lc 60:</strong> Minimum for readable medium-size content.',
+        '<strong>Lc 45:</strong> Minimum for large or decorative elements.',
+      ],
+    },
+  ],
+};