https://www.colorcontrast.org/_next/static/chunks/5057.fde680fa550219fe.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5057],{49590:function(e,s,r){r.d(s,{Z:function(){return t}});let t=(0,r(78030).Z)("RotateCcw",[["path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",key:"1357e3"}],["path",{d:"M3 3v5h5",key:"1xhq8a"}]])},95057:function(e,s,r){r.r(s),r.d(s,{RealWorldPreview:function(){return h}});var t=r(57437),l=r(2265),a=r(22468),o=r(36127),n=r(49590),d=r(63616);function i(e){let{fg:s,bg:r,label:n}=e,i=(0,l.useMemo)(()=>(0,d.Sk)(s),[s]),c=(0,l.useMemo)(()=>(0,d.Sk)(r),[r]),x=(0,l.useMemo)(()=>i&&c?(0,d.Rl)(i,c):null,[i,c]);if(!x)return null;let u=x.aaNormal;return(0,t.jsxs)("span",{className:"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold ".concat(u?"bg-emerald-700 text-white border border-emerald-600":"bg-red-700 text-white border border-red-600"),children:[u?(0,t.jsx)(a.Z,{className:"w-3 h-3"}):(0,t.jsx)(o.Z,{className:"w-3 h-3"}),n,": ",x.ratio.toFixed(1),":1 ",u?"AA":"FAIL"]})}function c(e){let{fg:s,bg:r}=e;return(0,t.jsx)("div",{className:"rounded-lg overflow-hidden",style:{backgroundColor:r},children:(0,t.jsxs)("div",{className:"flex items-center justify-between px-4 py-3",children:[(0,t.jsx)("span",{className:"font-bold text-sm",style:{color:s},children:"Brand"}),(0,t.jsx)("div",{className:"flex items-center gap-4",children:["Home","About","Services","Contact"].map(e=>(0,t.jsx)("span",{className:"text-xs font-medium opacity-80",style:{color:s},children:e},e))})]})})}function x(e){let{fg:s,bg:r}=e;return(0,t.jsxs)("div",{className:"rounded-lg p-5 space-y-2",style:{backgroundColor:r},children:[(0,t.jsx)("h3",{className:"text-lg font-bold",style:{color:s},children:"Building Accessible Interfaces"}),(0,t.jsx)("p",{className:"text-sm leading-relaxed",style:{color:s,opacity:.75},children:"Color contrast is the foundation of readable web content. Without sufficient contrast between text and background, millions of users with visual impairments struggle to perceive your content."}),(0,t.jsx)("p",{className:"text-xs",style:{color:s,opacity:.8},children:"Published June 2026 \xb7 8 min read"})]})}function u(e){let{fg:s,bg:r}=e;return(0,t.jsxs)("div",{className:"rounded-lg p-5 space-y-3",style:{backgroundColor:r},children:[(0,t.jsxs)("div",{className:"flex flex-wrap gap-3",children:[(0,t.jsx)("button",{className:"px-5 py-2.5 rounded-full text-sm font-semibold",style:{backgroundColor:s,color:r},children:"Primary CTA"}),(0,t.jsx)("button",{className:"px-5 py-2.5 rounded-full text-sm font-medium border",style:{color:s,borderColor:s,backgroundColor:"transparent"},children:"Outline"})]}),(0,t.jsx)(i,{fg:r,bg:s,label:"Button"})]})}function m(e){let{fg:s,bg:r}=e,l="#FFFFFF"===r?"#F5F5F5":f(r,5),a=s+"40";return(0,t.jsxs)("div",{className:"rounded-lg p-5 space-y-3",style:{backgroundColor:r},children:[(0,t.jsxs)("div",{className:"space-y-1.5",children:[(0,t.jsx)("label",{className:"text-xs font-semibold",style:{color:s},children:"Email address"}),(0,t.jsx)("input",{type:"text",placeholder:"[email protected]",className:"w-full px-3 py-2.5 rounded-lg text-sm border outline-none",style:{color:s,backgroundColor:l,borderColor:a},readOnly:!0})]}),(0,t.jsx)(i,{fg:s,bg:l,label:"Input"})]})}function p(e){let{fg:s,bg:r}=e;return(0,t.jsxs)("div",{className:"rounded-lg p-5 text-sm leading-relaxed",style:{backgroundColor:r},children:[(0,t.jsxs)("p",{style:{color:s,opacity:.75},children:["For more information, please refer to our"," ",(0,t.jsx)("span",{style:{color:s,textDecoration:"underline",textUnderlineOffset:"2px",fontWeight:500},children:"accessibility guidelines"})," ","and"," ",(0,t.jsx)("span",{style:{color:s,textDecoration:"underline",textUnderlineOffset:"2px",fontWeight:500},children:"WCAG compliance checklist"}),"."]}),(0,t.jsx)("div",{className:"mt-3",children:(0,t.jsx)(i,{fg:s,bg:r,label:"Link"})})]})}function g(e){let{fg:s,bg:r}=e,l="#FFFFFF"===r?"#FAFAFA":f(r,8);return(0,t.jsxs)("div",{className:"rounded-lg p-5",style:{backgroundColor:r},children:[(0,t.jsxs)("div",{className:"rounded-lg p-4 space-y-2",style:{backgroundColor:l},children:[(0,t.jsx)("h3",{className:"text-sm font-bold",style:{color:s},children:"Getting Started Guide"}),(0,t.jsx)("p",{className:"text-xs leading-relaxed",style:{color:s,opacity:.8},children:"Learn how to integrate accessibility checks into your design workflow with our step-by-step tutorial."}),(0,t.jsx)("span",{className:"text-xs font-semibold",style:{color:s},children:"Read more →"})]}),(0,t.jsx)("div",{className:"mt-3",children:(0,t.jsx)(i,{fg:s,bg:l,label:"Card"})})]})}function f(e,s){let r=(0,d.Sk)(e);if(!r)return e;let t=Math.round(s/100*255),l=e=>Math.min(255,e+t).toString(16).padStart(2,"0").toUpperCase();return"#".concat(l(r.r)).concat(l(r.g)).concat(l(r.b))}let b=[{label:"Default",fg:"#333333",bg:"#FFFFFF"},{label:"Dark mode",fg:"#E5E7EB",bg:"#1F2937"},{label:"Brand warm",fg:"#1A1A2E",bg:"#F5E6D3"},{label:"High contrast",fg:"#000000",bg:"#FFFFFF"}];function h(){let[e,s]=(0,l.useState)("#333333"),[r,a]=(0,l.useState)("#FFFFFF"),o=(0,l.useMemo)(()=>(0,d.Sk)(e),[e]),i=(0,l.useMemo)(()=>(0,d.Sk)(r),[r]),f=(0,l.useMemo)(()=>o&&i?Math.round(100*(0,d.wo)(o,i))/100:0,[o,i]),h=(0,l.useCallback)(()=>{s("#333333"),a("#FFFFFF")},[]);return(0,t.jsx)("section",{className:"py-10",children:(0,t.jsxs)("div",{className:"max-w-5xl mx-auto px-4",children:[(0,t.jsxs)("div",{className:"text-center mb-8",children:[(0,t.jsx)("span",{className:"inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary border border-primary/20 mb-3",children:"Live Preview"}),(0,t.jsx)("h2",{className:"text-3xl font-extrabold text-foreground",children:"Real-World Preview"}),(0,t.jsx)("p",{className:"mt-2 text-muted-foreground max-w-xl mx-auto",children:"See how your colors look in real website components — nav bars, articles, buttons, forms, and links."})]}),(0,t.jsxs)("div",{className:"flex flex-wrap items-center justify-center gap-4 mb-10",children:[(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)("label",{className:"text-xs font-medium text-muted-foreground",children:"Text"}),(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)("input",{type:"color",value:e,onCh

1ange:e=>s(e.target.value),"aria-label":"Text color",className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer"}),(0,t.jsx)("div",{className:"w-10 h-10 rounded-lg border-2 border-border ring-2 ring-offset-1 ring-offset-background ring-transparent hover:ring-primary/30 transition-all",style:{backgroundColor:e}})]}),(0,t.jsx)("input",{type:"text",value:e,onChange:e=>s(e.target.value),"aria-label":"Text color hex value",className:"w-20 h-9 px-2 rounded-lg bg-card border border-border text-xs text-center font-mono text-foreground focus:outline-none focus:ring-1 focus:ring-primary"})]}),(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[(0,t.jsx)("label",{className:"text-xs font-medium text-muted-foreground",children:"Background"}),(0,t.jsxs)("div",{className:"relative",children:[(0,t.jsx)("input",{type:"color",value:r,onChange:e=>a(e.target.value),"aria-label":"Background color",className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer"}),(0,t.jsx)("div",{className:"w-10 h-10 rounded-lg border-2 border-border ring-2 ring-offset-1 ring-offset-background ring-transparent hover:ring-primary/30 transition-all",style:{backgroundColor:r}})]}),(0,t.jsx)("input",{type:"text",value:r,onChange:e=>a(e.target.value),"aria-label":"Background color hex value",className:"w-20 h-9 px-2 rounded-lg bg-card border border-border text-xs text-center font-mono text-foreground focus:outline-none focus:ring-1 focus:ring-primary"})]}),(0,t.jsxs)("div",{className:"flex items-center gap-2 px-4 py-2 rounded-lg bg-muted/30",children:[(0,t.jsx)("span",{className:"text-xs text-muted-foreground",children:"Ratio"}),(0,t.jsx)("span",{className:"text-lg font-bold text-foreground tabular-nums",children:f}),(0,t.jsx)("span",{className:"text-muted-foreground",children:":1"})]}),(0,t.jsxs)("button",{onClick:h,className:"btn-ghost h-9 px-3 text-xs",children:[(0,t.jsx)(n.Z,{className:"w-3.5 h-3.5"}),"Reset"]})]}),(0,t.jsx)("div",{className:"flex justify-center gap-2 mb-10",children:b.map(l=>(0,t.jsx)("button",{onClick:()=>{s(l.fg),a(l.bg)},className:"px-3 py-1.5 rounded-full text-xs font-medium border transition-all ".concat(e===l.fg&&r===l.bg?"bg-primary text-primary-foreground border-primary":"bg-card text-foreground border-border hover:border-primary/30 hover:text-foreground"),children:l.label},l.label))}),(0,t.jsxs)("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:[(0,t.jsxs)("div",{className:"glass-card !p-0 overflow-hidden",children:[(0,t.jsx)("div",{className:"px-3 pt-3 pb-1",children:(0,t.jsx)("span",{className:"text-[10px] font-semibold text-muted-foreground uppercase tracking-wider",children:"Navigation"})}),(0,t.jsx)(c,{fg:e,bg:r})]}),(0,t.jsxs)("div",{className:"glass-card !p-0 overflow-hidden",children:[(0,t.jsx)("div",{className:"px-3 pt-3 pb-1",children:(0,t.jsx)("span",{className:"text-[10px] font-semibold text-muted-foreground uppercase tracking-wider",children:"Article"})}),(0,t.jsx)(x,{fg:e,bg:r})]}),(0,t.jsxs)("div",{className:"glass-card !p-0 overflow-hidden",children:[(0,t.jsx)("div",{className:"px-3 pt-3 pb-1",children:(0,t.jsx)("span",{className:"text-[10px] font-semibold text-muted-foreground uppercase tracking-wider",children:"Button"})}),(0,t.jsx)(u,{fg:e,bg:r})]}),(0,t.jsxs)("div",{className:"glass-card !p-0 overflow-hidden",children:[(0,t.jsx)("div",{className:"px-3 pt-3 pb-1",children:(0,t.jsx)("span",{className:"text-[10px] font-semibold text-muted-foreground uppercase tracking-wider",children:"Form Input"})}),(0,t.jsx)(m,{fg:e,bg:r})]}),(0,t.jsxs)("div",{className:"glass-card !p-0 overflow-hidden",children:[(0,t.jsx)("div",{className:"px-3 pt-3 pb-1",children:(0,t.jsx)("span",{className:"text-[10px] font-semibold text-muted-foreground uppercase tracking-wider",children:"Text Link"})}),(0,t.jsx)(p,{fg:e,bg:r})]}),(0,t.jsxs)("div",{className:"glass-card !p-0 overflow-hidden",children:[(0,t.jsx)("div",{className:"px-3 pt-3 pb-1",children:(0,t.jsx)("span",{className:"text-[10px] font-semibold text-muted-foreground uppercase tracking-wider",children:"Card"})}),(0,t.jsx)(g,{fg:e,bg:r})]})]})]})})}}}]);