https://digitup.com/ContrastChecker-ContrastChecker-48dad2f8ad02403ae7e6.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[5998],{65317:function(e,t,a){a.r(t),a.d(t,{default:function(){return y}});var n={};a.r(n),a.d(n,{wm:function(){return l},S2:function(){return c},fJ:function(){return o},DE:function(){return s},Is:function(){return u},Ig:function(){return m},ne:function(){return i},kc:function(){return d},y6:function(){return E},I6:function(){return C},kP:function(){return A},rO:function(){return g},IX:function(){return p},VH:function(){return f},A2:function(){return h},x9:function(){return N},X0:function(){return b},zF:function(){return k},uN:function(){return v},iE:function(){return x}});var r=a(96540),l="ContrastChecker-module--buttonControl--35875",c="ContrastChecker-module--colorBtn--c5dfd",o="ContrastChecker-module--colorControl--f9b91",s="ContrastChecker-module--colorGroup--2943c",u="ContrastChecker-module--compliance--f7156",m="ContrastChecker-module--contrastNumber--f3fb0",i="ContrastChecker-module--controls--ccb00",d="ContrastChecker-module--errorText--85ae9",E="ContrastChecker-module--fail--4ad15",C="ContrastChecker-module--inputWrapper--756b9",A="ContrastChecker-module--lorem--2b886",g="ContrastChecker-module--para--ecc96",p="ContrastChecker-module--pass--07ad4",f="ContrastChecker-module--preview--cbb8d",h="ContrastChecker-module--swapBtn--6be75",N="ContrastChecker-module--tableData--ecec2",b="ContrastChecker-module--tdHead--4273e",k="ContrastChecker-module--textCompliance--3c1f4",v="ContrastChecker-module--tip--1d084",x="ContrastChecker-module--wrapper--b4858",T=a(3),w=a(17613);var y=e=>{let{urlResponseText:t,requiredUrlMessage:a}=e;const{0:y,1:S}=(0,r.useState)("#2F27C5"),{0:_,1:D}=(0,r.useState)("#C7C4D7"),{0:F,1:L}=(0,r.useState)(!1),{0:I,1:P}=(0,r.useState)(null),{0:O,1:$}=(0,r.useState)("");let B="Increase contrast to at least 4.5:1 for normal text (AA).",H="To reach AAA for normal text, target 7.0:1 by slightly darkening the background or lightening the text.",R="Great! Your colors meet the required contrast.";return r.createElement("div",{className:`${x}`},r.createElement("div",{className:"container c-padding-bottom"},r.createElement("h1",{className:"global-spacing-bottom c-padding-top "},t.Title),r.createElement("p",{className:`global-spacing-bottom ${g}`},t.Para),r.createElement("div",{className:o},r.createElement("div",{className:`global-spacing-bottom ${i}`},r.createElement("div",{className:l},r.createElement("div",{className:s},r.createElement("label",null,t.Foreground),r.createElement("div",{className:C},r.createElement("input",{type:"text",value:y,onChange:e=>S(e.target.value)}),r.createElement("button",{className:c,style:{backgroundColor:y}},r.createElement(w.aEx,null),r.createElement("input",{type:"color",value:y,onChange:e=>S(e.target.value)})))),r.createElement("div",{className:s},r.createElement("label",null,t.Background),r.createElement("div",{className:C},r.createElement("input",{type:"text",value:_,onChange:e=>D(e.target.value)}),r.createElement("button",{className:c,style:{backgroundColor:_}},r.createElement(w.aEx,null),r.createElement("input",{type:"color",value:_,onChange:e=>D(e.target.value)}))))),r.createElement("div",null,r.createElement("button",{className:h,onClick:()=>{S(_),D(y)}},r.createElement(T.jTZ,null))),r.createElement("div",null,r.createElement("button",{className:"primaryFilled",onClick:async()=>{L(!0),$(""),P(null);try{const e=await fetch("/.netlify/functions/contrast-checker",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({foreground:y,background:_})});if(!e.ok)throw new Error("API error");const t=await e.json();P(t)}catch(e){if(""===y||""===_)$(a);else{const t=(null==e?void 0:e.message)||"Something went wrong";$(t)}}finally{L(!1)}},disabled:F},t.CheckNow))),O&&r.createElement("p",{className:d},O),I&&r.createElement("div",{className:n.results},r.createElement("div",{className:` ${f}`,style:{color:I["foreground-color"],backgroundColor:I["background-color"]}},r.createElement("h2",{className:`h3 ${A}`},t.LoremIpsum),r.createElement("p",null," ",t.LoremIpsumDescription)),r.createElement("div",{className:n.contrastRatio},r.createElement("p",{className:"global-spacing-top"},t.ContrastRatio),r.createElement("h4",{className:m},r.createElement("strong",null,I.contrastRatio.toFixed(2),":1"))),r.createElement("div",{className:`global-spacing-top ${u}`},r.createElement("p",{className:k},t.WCAGCompliance),r.createElement("table",{className:N},r.createElement("tbody",null,r.createElement("tr",null,r.createElement("td",{className:b},t.NormalText),r.createElement("td",null,r.createElement("div",{className:I.wcag.normalText.AA?p:E},I.wcag.normalText.AA?t.AAPass:t.AAFail)),r.createElement("td",null,r.createElement("div",{className:I.wcag.normalText.AAA?p:E},I.wcag.normalText.AAA?t.AAAPass:t.AAAFail))),r.createElement("tr",null,r.createElement("td",{className:b},t.LargeText),r.createElement("td",null,r.createElement("div",{className:I.wcag.largeText.AA?p:E},I.wcag.largeText.AA?t.AAPass:t.AAFail)),r.createElement("td",null,r.createElement("div",{className:I.wcag.largeText.AAA?p:E},I.wcag.largeText.AAA?t.AAAPass:t.AAAFail)))))),r.createElement("div",{className:v},r.createElement("p",null,t.Suggestion),I.tip===B&&r.createElement("p",null,t.Tips.AA),I.tip===H&&r.createElement("p",null,t.Tips.AAA),I.tip===R&&r.createElement("p",null,t.Tips.Success))))))}}}]);
2//# sourceMappingURL=ContrastChecker-ContrastChecker-48dad2f8ad02403ae7e6.js.map