https://colorcheck.dev/assets/MethodologyPage-B3dNsN0Y.js

1import{F as c,l as e,P as d,C as r,X as a}from"./index-CuhXhId9.js";import{J as n}from"./JsonLd-BBeHtMDH.js";import{A as m}from"./arrow-left-Cmh__A_Z.js";import{M as u}from"./minus-D40qWBj0.js";const p=[{name:"ColorCheck",accent:"text-bauhaus-red",summary:"Purpose-built for color vision accessibility. Scans full pages, simulates 8 CVD types, and renders true side-by-side previews.",strengths:["Renders the page through 8 CVD filters (protanopia, deuteranopia, tritanopia, achromatopsia + mild variants)","Crawls up to 5 URLs in one scan","Visual before/after preview, not just numeric ratios","WCAG 2.1 AA + AAA contrast scoring on every text/background pair","Shareable reports + PDF export","Zero install — works on any URL"]},{name:"Chrome DevTools",accent:"text-foreground",summary:"General-purpose browser inspector. Has a contrast checker in the color picker and a basic vision deficiency emulator buried in the Rendering panel.",strengths:["Free and built into every Chromium browser","Live contrast ratio when editing a single CSS color","Whole-viewport CVD simulation (one type at a time, manual)"],gaps:["No automated scan — you inspect one element at a time","No multi-page support, no shareable reports","Simulator only renders the visible viewport, no diff view","Requires DevTools knowledge — not designer-friendly"]},{name:"axe DevTools / WAVE",accent:"text-foreground",summary:"Industry-standard accessibility auditors. Excellent for full WCAG coverage (alt text, ARIA, keyboard nav), but color vision is a small slice of what they do.",strengths:["Comprehensive WCAG 2.1 rule coverage","Reliable contrast ratio reporting on detected text","Used widely in CI pipelines"],gaps:["No CVD simulation — they report ratios, never show what color-blind users see","Text-only output, no visual preview","Designed for engineers running audits, not designers iterating on color"]}],x=[{label:"Scans full page in seconds",detail:"Tool returns a complete report on every detected color & contrast pair from a single URL submission, without manual element selection."},{label:"Simulates 8 types of color blindness",detail:"Tool can render the page through all major CVD filters: protanopia, deuteranopia, tritanopia, achromatopsia, and their mild forms."},{label:"Visual side-by-side preview",detail:"Tool shows the original and simulated views together so you can compare directly — not just numeric output."},{label:"Multi-page crawl",detail:"Tool can scan multiple URLs in one job (we test up to 5 pages)."},{label:"WCAG contrast scoring",detail:"Tool returns AA / AAA pass/fail per text-background pair. 'Partial' = available only when manually inspecting one element."},{label:"Works on any URL — no install",detail:"Tool runs from a browser without installing an extension, plugin, or local agent."},{label:"Shareable reports & PDF export",detail:"Results can be saved, shared via link, or exported to PDF for stakeholders."},{label:"Designed for designers + devs",detail:"Output is readable to non-engineers (visual previews, plain language) — not just stack traces and DOM paths."}],o=({icon:t,bg:s,label:i,desc:l})=>e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${s}`,children:t}),e.jsxs("div",{children:[e.jsx("div",{className:"text-xs font-bold uppercase tracking-wider text-foreground",children:i}),e.jsx("div",{className:"text-xs text-muted-foreground",children:l})]})]}),y=()=>(c({title:"Comparison Methodology | ColorCheck",description:"How we rated ColorCheck, Chrome DevTools, axe and WAVE on color vision accessibility features."}),e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(n,{id:"methodology-breadcrumbs",data:{"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:"https://colorcheck.dev/"},{"@type":"ListItem",position:2,name:"Methodology",item:"https://colorcheck.dev/methodology"}]}}),e.jsx(n,{id:"methodology-article",data:{"@context":"https://schema.org","@type":"Article",headline:"How we rated each color vision accessibility tool",description:"How we rated ColorCheck, Chrome DevTools, axe and WAVE on color vision accessibility features.",author:{"@type":"Organization",name:"ColorCheck"},publisher:{"@type":"Organization",name:"ColorCheck",logo:{"@type":"ImageObject",url:"https://colorcheck.dev/favicon.png"}},mainEntityOfPage:{"@type":"WebPage","@id":"https://colorcheck.dev/methodology"},image:"https://colorcheck.dev/og.jpg"}}),e.jsxs("main",{className:"container mx-auto max-w-3xl px-4 py-16 sm:px-6 sm:py-24",children:[e.jsxs(d,{to:"/",className:"mb-8 inl

1ine-flex items-center gap-1.5 text-[11px] font-mono uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors",children:[e.jsx(m,{className:"h-3.5 w-3.5"}),"Back to home"]}),e.jsx("div",{className:"mb-4 inline-block rounded-full border border-foreground/15 bg-background px-3 py-1 text-[10px] font-mono uppercase tracking-[0.18em] text-muted-foreground",children:"Methodology"}),e.jsx("h1",{className:"text-3xl font-black leading-[1.05] text-foreground sm:text-5xl",children:"How we rated each tool"}),e.jsxs("p",{className:"mt-4 max-w-xl text-sm font-sans text-muted-foreground sm:text-base",children:["Our comparison focuses on ",e.jsx("strong",{children:"color vision accessibility"})," — not general accessibility auditing. Each tool was tested against the same 8 criteria using its latest stable release as of 2026."]}),e.jsxs("section",{className:"mt-12 rounded-2xl border-2 border-foreground/10 bg-card p-5 sm:p-6",children:[e.jsx("div",{className:"mb-4 text-[10px] font-mono uppercase tracking-[0.18em] text-muted-foreground",children:"Rating legend"}),e.jsxs("div",{className:"grid gap-4 sm:grid-cols-3",children:[e.jsx(o,{icon:e.jsx(r,{className:"h-4 w-4 text-white",strokeWidth:3}),bg:"bg-bauhaus-blue",label:"Yes",desc:"Feature works out of the box, no workaround needed."}),e.jsx(o,{icon:e.jsx(u,{className:"h-4 w-4 text-foreground",strokeWidth:3}),bg:"bg-bauhaus-yellow",label:"Partial",desc:"Possible, but requires manual steps or only covers a subset."}),e.jsx(o,{icon:e.jsx(a,{className:"h-4 w-4 text-foreground/40",strokeWidth:3}

1),bg:"border-2 border-foreground/20",label:"No",desc:"Not supported, or requires a different tool entirely."})]})]}),e.jsxs("section",{className:"mt-12",children:[e.jsx("h2",{className:"text-2xl font-black text-foreground sm:text-3xl",children:"The 8 criteria"}),e.jsx("ol",{className:"mt-6 space-y-4",children:x.map((t,s)=>e.jsx("li",{className:"rounded-xl border border-foreground/10 bg-card p-4 sm:p-5",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("span",{className:"mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-foreground text-[11px] font-mono font-bold text-background",children:s+1}),e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-bold text-foreground",children:t.label}),e.jsx("div",{className:"mt-1 text-xs text-muted-foreground sm:text-sm",children:t.detail})]})]})},t.label))})]}),e.jsxs("section",{className:"mt-12",children:[e.jsx("h2",{className:"text-2xl font-black text-foreground sm:text-3xl",children:"Per-tool notes"}),e.jsx("div",{className:"mt-6 space-y-6",children:p.map(t=>e.jsxs("article",{className:"rounded-2xl border-2 border-foreground

1/10 bg-card p-5 sm:p-6",children:[e.jsx("h3",{className:`text-lg font-black uppercase tracking-wider ${t.accent}`,children:t.name}),e.jsx("p",{className:"mt-2 text-sm text-muted-foreground",children:t.summary}),e.jsx("div",{className:"mt-4 text-[10px] font-mono uppercase tracking-[0.18em] text-muted-foreground",children:"Strengths"}),e.jsx("ul",{className:"mt-2 space-y-1.5",children:t.strengths.map(s=>e.jsxs("li",{className:"flex items-start gap-2 text-xs sm:text-sm text-foreground",children:[e.jsx(r,{className:"mt-0.5 h-3.5 w-3.5 shrink-0 text-bauhaus-blue",strokeWidth:3}),e.jsx("span",{children:s})]},s))}),t.gaps&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"mt-4 text-[10px] font-mono uppercase tracking-[0.18em] text-muted-foreground",children:"Gaps for color vision work"}),e.jsx("ul",{className:"mt-2 space-y-1.5",children:t.gaps.map(s=>e.jsxs("li",{className:"flex items-start gap-2 text-xs sm:text-sm text-foreground",children:[e.jsx(a,{className:"mt-0.5 h-3.5 w-3.5 shrink-0 text-foreground/40",strokeWidth:3}),e.jsx("span",{children:s})]},s))})]})]},t.name))})]}),e.jsx("p",{className:"mt-12 text-center text-[11px] font-mono uppercase tracking-wider text-muted-foreground",children:"Spotted something off? Email us — we update this page when tools ship new features."})]})]}));export{y as default};