{"version":3,"file":"f3fc7ac4.js","mappings":"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","sources":["webpack://audioeye-web/./src/components/ContrastChecker.jsx"],"sourcesContent":["/* eslint-disable indent */\n/* eslint-disable no-unused-expressions */\nimport React, { useState, useEffect } from 'react'\nimport styled from '@emotion/styled'\nimport Contrast from 'get-contrast'\nimport { HexColorPicker } from 'react-colorful'\nimport { theme } from '../styles'\nimport hexToHSL from '../utils/hexToHSL.js'\nimport hslToHex from '../utils/hslToHex.js'\n\nimport { PersonIcon } from '../../static/icons/component-icons/PersonIcon.js'\nimport CrossIcon from '../../static/icons/misc-icons/cross-icon-gray700.svg'\nimport colorPickerCard from '../../static/icons/misc-icons/color-picker-card.svg'\nimport greenCheckIcon from '../../static/icons/check-icons/green700-check-icon.svg'\nimport errorIcon from '../../static/icons/misc-icons/error-icon.svg'\nimport swapIcon from '../../static/icons/misc-icons/swap-arrows.svg'\nimport contrastIcon from '../../static/icons/component-icons/ContrastIcon.png'\nimport pointerCardIcon from '../../static/icons/misc-icons/pointer-card.svg'\nimport rightPointerCardIcon from '../../static/icons/misc-icons/right-pointer-card.svg'\nimport shareIconPurple from '../../static/icons/misc-icons/share-icon-purple500.svg'\nimport shareIconOffBlack from '../../static/icons/misc-icons/share-icon-offBlack.svg'\n\nimport Input from './form/Input'\nimport Tooltip from './common/Tooltip'\nimport Text from './common/Text'\nimport Tag from './common/Tag'\nimport Space from './common/Space'\nimport Button from './common/Button'\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  padding: 80px 0px;\n  position: relative;\n\n  @media (max-width: 800px) {\n    width: 100%;\n    margin: 0 auto;\n  }\n`\n\nconst BG = styled.div`\n  position: absolute;\n  width: 500vw;\n  margin-left: -300%;\n  height: 100%;\n  z-index: -1;\n  background-color: ${theme.color.offWhite};\n  margin-top: -80px;\n\n  @media (max-width: 1050px) {\n    margin-left: -100%;\n  }\n`\n\nconst ScoreWrapper = styled.div`\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-gap: 24px;\n\n  @media (max-width: 800px) {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n`\n\nconst Card = styled.div`\n  display: grid;\n  background-color: ${theme.color.white};\n  border-radius: 8px;\n  box-shadow: 0px 0px 14px 3px ${theme.color.dropShadow};\n  padding: 32px;\n  position: relative;\n\n  @media (max-width: 800px) {\n    width: 100%;\n    padding: 32px;\n  }\n\n  * {\n    transition: all 150ms ease-in-out;\n  }\n`\n\nconst ColorInputs = styled(Card)`\n  grid-column: 1 / 3;\n  grid-row: 1 / 3;\n  grid-auto-flow: column;\n  grid-gap: 32px;\n  align-items: center;\n  grid-template-columns: 2fr 1fr 2fr;\n\n  input {\n    text-transform: uppercase;\n  }\n\n  @media (max-width: 800px) {\n    grid-gap: 16px;\n    grid-template-columns: 1fr;\n    grid-auto-flow: row;\n  }\n`\n\nconst ColorInputWrapper = styled.div`\n  display: flex;\n  align-items: flex-end;\n  height: fit-content;\n  position: relative;\n\n  label {\n    margin-bottom: 0px;\n  }\n\n  .popover {\n    position: absolute;\n    bottom: 16px;\n    right: -5px;\n    z-index: 9999;\n  }\n\n  .react-colorful {\n    background: url(${colorPickerCard});\n    background-size: 100%;\n    background-position: center;\n    background-repeat: no-repeat;\n    width: 224px;\n    height: 224px;\n    padding: 14%;\n    padding-bottom: 23%;\n    padding-top: 18%;\n  }\n`\n\nconst ColorPicker = styled.button`\n  position: absolute;\n  right: 10px;\n  bottom: 11px;\n  border: 1px solid ${theme.color.gray300};\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background-color: ${p => p.valueColor || theme.color.white};\n  padding: 0px;\n`\n\nconst CloseButton = styled.button`\n  position: absolute;\n  top: 22px;\n  right: 13px;\n  padding: 4px;\n  background: none;\n  display: flex;\n  z-index: 999999;\n`\n\nconst CloseIcon = styled.img`\n  width: 11px;\n  height: 11px;\n`\n\nconst SwapButton = styled.button`\n  background-color: transparent;\n  align-self: center;\n  justify-self: center;\n  border-radius: 8px;\n  padding: 8px;\n  margin-bottom: -8px;\n  width: max-content;\n\n  &:hover,\n  &:focus {\n    box-shadow: 0px 0px 14px 3px ${theme.color.dropShadow};\n    * {\n      color: ${theme.color.offBlack};\n    }\n  }\n  @media (max-width: 800px) {\n    align-self: center;\n  }\n`\n\nconst SwapBtnIcon = styled.img`\n  margin-bottom: 2px;\n\n  @media (max-width: 800px) {\n    transform: rotate(90deg);\n    margin: 6px 0px;\n  }\n`\n\nconst OverviewPreview = styled(Card)`\n  justify-items: center;\n  grid-column: 3 / 4;\n  grid-row: 1 / 4;\n  grid-gap: 16px;\n  background-color: ${p => p.backgroundColor || theme.color.white};\n  filter: ${p => (p.grayscale ? 'grayscale(100%)' : 'grayscale(0)')};\n\n  * {\n    color: ${p => p.contentColor || theme.color.offBlack};\n  }\n`\n\nconst Ratio = styled(Card)`\n  grid-column: 1 / 2;\n  grid-row: 3 / 5;\n  grid-gap: 16px;\n\n  .button {\n    display: grid;\n    grid-auto-flow: column;\n    grid-column-gap: 12px;\n    align-items: center;\n    min-width: 328px;\n\n    &::before {\n      content: url(${shareIconPurple});\n      height: 24px;\n    }\n\n    &:hover,\n    &:focus {\n      &::before {\n        content: url(${shareIconOffBlack});\n      }\n      p {\n        color: ${theme.color.offBlack};\n      }\n    }\n\n    @media (max-width: 1050px) {\n      min-width: unset;\n      width: auto;\n\n      p {\n        white-space: normal;\n      }\n    }\n  }\n\n  @media (max-width: 800px) {\n    order: 3;\n  }\n`\n\nconst RatioText = styled(Text)`\n  font-size: ${theme.fonts.size.heading1};\n  font-family: ${theme.fonts.family.heading1};\n  letter-spacing: ${theme.fonts.letterSpacing.smallCaps};\n\n  span {\n    font-size: ${theme.fonts.size.heading2};\n    font-family: ${theme.fonts.family.body};\n    letter-spacing: ${theme.fonts.letterSpacing.smallCaps};\n    color: ${theme.color.gray700};\n  }\n`\n\nconst TwoCol = styled.div`\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  height: fit-content;\n  align-items: center;\n`\n\nconst SmallTwoCol = styled(TwoCol)`\n  @media (max-width: 1200px) {\n    display: grid;\n    justify-content: center;\n    grid-gap: 8px;\n\n    div {\n      margin-left: 0px;\n    }\n  }\n\n  @media (max-width: 1050px) {\n    justify-content: flex-start;\n  }\n`\n\nconst SubTwoCol = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  grid-gap: 32px;\n`\n\nconst ComplianceLevel = styled(Card)`\n  grid-column: 2 / 3;\n  grid-row: 3 / 5;\n  grid-gap: 16px;\n\n  @media (max-width: 800px) {\n    order: 3;\n    grid-gap: 24px;\n  }\n`\n\nconst GrayscaleControl = styled(Card)`\n  grid-column: 3 / 4;\n  grid-row: 4 / 5;\n  grid-gap: 16px;\n  padding: 24px 32px;\n  display: flex;\n  align-items: center;\n\n  @media (max-width: 800px) {\n    order: 2;\n  }\n`\n\nconst GrayscaleToggle = styled.button`\n  min-width: 50px;\n  height: 26px;\n  border: 2px solid ${theme.color.purple500};\n  border-radius: 15px;\n  background-color: transparent;\n  margin-top: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  transition: padding-left 100ms ease-in-out;\n  padding-left: ${p => (p.grayscale ? '26px' : '4px')};\n\n  ::before {\n    content: '';\n    width: 16px;\n    height: 16px;\n    background-color: ${theme.color.purple500};\n    border-radius: 100%;\n  }\n`\n\nconst RatioScale = styled(Card)`\n  grid-column: 1 / -1;\n  grid-row: 5 / -1;\n  grid-gap: 96px;\n\n  @media (max-width: 800px) {\n    order: 4;\n    grid-gap: 16px;\n  }\n`\n\nconst ScaleGradientWrapper = styled.div`\n  display: grid;\n  grid-template-columns: 1fr 18fr 1fr;\n  grid-gap: 8px;\n\n  @media (max-width: 800px) {\n    margin-top: 0;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto auto;\n    grid-gap: 16px;\n    grid-row: 2 / 3;\n    grid-column: 1/ -1;\n    margin: 0 auto;\n  }\n`\n\nconst ScaleGradientRange = styled.div`\n  height: 20px;\n  background-color: ${theme.color.gray300};\n  border-radius: 20px;\n  position: relative;\n\n  @media (max-width: 800px) {\n    width: 20px;\n    height: 100vw;\n    background-image: ${theme.color.gray300};\n    border-radius: 20px;\n    grid-row: 2 / 3;\n    grid-column: 1 / 2;\n    justify-self: flex-end;\n  }\n`\n\nconst ScaleGradientFill = styled.div`\n  height: 20px;\n  width: ${p => (p.ratio ? `${p.ratio}%` : '100%')};\n  background-image: linear-gradient(to right, ${theme.color.green500}, ${theme.color.purple500});\n  border-radius: 20px;\n\n  @media (max-width: 800px) {\n    width: 20px;\n    height: ${p => (p.ratio ? `${p.ratio}%` : '100%')};\n    background-image: linear-gradient(to bottom, ${theme.color.green500}, ${theme.color.purple500});\n    border-radius: 20px;\n  }\n`\n\nconst LowWrapper = styled.div`\n  display: grid;\n  justify-items: center;\n\n  @media (max-width: 800px) {\n    grid-row: 1 / 2;\n    grid-column: 1 / -1;\n    grid-auto-flow: column;\n    align-items: center;\n    grid-gap: 8px;\n  }\n`\n\nconst HighWrapper = styled.div`\n  display: grid;\n  justify-items: center;\n\n  @media (max-width: 800px) {\n    grid-row: 3 / 4;\n    grid-column: 1 / -1;\n    grid-auto-flow: column;\n    align-items: center;\n    grid-gap: 8px;\n  }\n`\n\nconst RatingWrapper = styled.div`\n  display: grid;\n  grid-column: 2 / 3;\n  margin-top: -24px;\n  grid-template-columns: 12% 7% 13% 61% 7%;\n  padding: 0px 4px;\n\n  @media (max-width: 800px) {\n    margin-top: 0px;\n    padding: 0px;\n    padding-top: 4px;\n    grid-template-columns: 1fr;\n    grid-template-rows: 12% 7% 13% 61% 7%;\n    grid-column: 2/ -1;\n    grid-row: 2 / 3;\n  }\n`\n\nconst Rating = styled.div``\n\nconst Rating5 = styled(Rating)`\n  text-align: right;\n\n  @media (max-width: 800px) {\n    text-align: left;\n    margin-top: 8px;\n  }\n`\n\nconst YourScoreBox = styled.div`\n  background-image: url(${pointerCardIcon});\n  background-repeat: no-repeat;\n  background-size: 100%;\n  width: 100px;\n  height: 90px;\n  padding-top: 8px;\n  text-align: center;\n  margin: 0px;\n  position: absolute;\n  left: ${p => `calc(${p.ratio}% - 56px)`};\n  bottom: 20px;\n\n  @media (max-width: 800px) {\n    background-image: url(${rightPointerCardIcon});\n    margin: 0px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    padding-top: 0px;\n    padding-right: 13px;\n    position: absolute;\n    top: ${p => `calc(${p.ratio}% - 50px)`};\n    right: 24px;\n    left: unset;\n    bottom: unset;\n  }\n`\n\nconst LuminosityInputWrapper = styled.div`\n  display: flex;\n  margin-top: 16px;\n  padding: 0px 8px;\n  position: relative;\n`\n\nconst Luminosity = styled.input`\n  width: 100%;\n  margin-left: 8px;\n  -webkit-appearance: none;\n\n  &::-webkit-slider-runnable-track {\n    height: 7px;\n    width: 100%;\n    background: linear-gradient(to right, ${theme.color.offBlack}, ${theme.color.gray100});\n    border-radius: 7px;\n  }\n\n  &::-moz-range-track {\n    height: 7px;\n    width: 100%;\n    background: linear-gradient(to right, ${theme.color.offBlack}, ${theme.color.gray100});\n    border-radius: 7px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 15px;\n    width: 15px;\n    border-radius: 100%;\n    background: ${theme.color.offBlack};\n    transform: translateY(-25%);\n  }\n\n  &::-moz-range-thumb {\n    -webkit-appearance: none;\n    height: 15px;\n    width: 15px;\n    border-radius: 100%;\n    background: ${theme.color.offBlack};\n    transform: translateY(0%);\n  }\n\n  &::-ms-thumb {\n    -webkit-appearance: none;\n    height: 15px;\n    width: 15px;\n    border-radius: 100%;\n    background: ${theme.color.offBlack};\n    transform: translateY(0%);\n  }\n`\n\nconst ContrastChecker = () => {\n  const [ratio, setRatio] = useState()\n  const [level, setLevel] = useState('GREAT')\n  const [pass, setPass] = useState(true)\n  const [valueA, setValueA] = useState('#000000')\n  const [valueB, setValueB] = useState('#FFFFFF')\n  const [luminosityA, setLuminosityA] = useState('0')\n  const [luminosityB, setLuminosityB] = useState('255')\n  const [grayscale, setGrayscale] = useState(false)\n  const [isPickerAOpen, setIsPickerAOpen] = useState(false)\n  const [isPickerBOpen, setIsPickerBOpen] = useState(false)\n  const [isCopied, setIsCopied] = useState(false)\n\n  const windowGlobal = typeof window !== `undefined` && window\n\n  useEffect(() => {\n    const url = new URL(windowGlobal && windowGlobal.location)\n    const params = new URLSearchParams(url.search)\n    const foregroundColor = params.get('f_color')\n    const backgroundColor = params.get('b_color')\n    if (foregroundColor) setValueA(`#${foregroundColor}`)\n    if (backgroundColor) setValueB(`#${backgroundColor}`)\n  }, [])\n\n  const calculateRatio = (a, b) => {\n    const newRatio = Contrast.ratio(a, b).toString().split('.')\n    const prettyRatio = newRatio.length > 1 ? `${newRatio[0]}.${newRatio[1].substring(0, 1)}` : newRatio[0]\n    setRatio(prettyRatio)\n    setPass(Contrast.isAccessible(a, b))\n    determineLevel(ratio)\n  }\n\n  useEffect(() => {\n    if (valueA.length === 7 && valueB.length === 7) {\n      const hslA = hexToHSL(valueA)\n      const hslB = hexToHSL(valueB)\n      const luminosityValA = hslA.split(',')[2].split('%')[0]\n      const luminosityValB = hslB.split(',')[2].split('%')[0]\n      setLuminosityA(luminosityValA)\n      setLuminosityB(luminosityValB)\n      calculateRatio(hslA, hslB)\n    }\n  }, [valueA, valueB, ratio])\n\n  const handleInput = (input, aOrB) => {\n    const isValidHex = new RegExp('^[A-Fa-f0-9#]*$')\n    if (isValidHex.test(input)) {\n      aOrB === 'A' ? setValueA(input) : setValueB(input)\n    }\n  }\n\n  const handleLuminosity = (val, aOrB) => {\n    aOrB === 'A' ? setLuminosityA(val) : setLuminosityB(val)\n    const hslVal = aOrB === 'A' ? hexToHSL(valueA) : hexToHSL(valueB)\n    const newHsl = `hsl(${hslVal.split(',')[0].split('(')[1]}, ${hslVal.split(',')[1]}, ${val}%)`\n    aOrB === 'A' ? setValueA(hslToHex(newHsl)) : setValueB(hslToHex(newHsl))\n  }\n\n  const determineLevel = contrastRatio => {\n    if (contrastRatio < 3) setLevel('POOR')\n    if (contrastRatio >= 3 && contrastRatio < 4.5) setLevel('OKAY')\n    if (contrastRatio >= 4.5 && contrastRatio < 7) setLevel('GOOD')\n    if (contrastRatio >= 7 && contrastRatio <= 21) setLevel('GREAT')\n  }\n\n  const copyTextToClipboard = async text => {\n    if ('clipboard' in navigator && text.href) {\n      await navigator.clipboard.writeText(text)\n      return\n    }\n    return document.execCommand('copy', true, text)\n  }\n\n  const handleShare = () => {\n    const queryParams = new URLSearchParams(window.location.search)\n    if (valueA && valueB) {\n      queryParams.set('f_color', `${valueA.split('#')[1]}`)\n      queryParams.set('b_color', `${valueB.split('#')[1]}`)\n      window.history.replaceState({}, '', `?${queryParams.toString()}`)\n\n      const url = new URL(windowGlobal && windowGlobal.location)\n      copyTextToClipboard(url).then(() => {\n        setIsCopied(true)\n        setTimeout(() => {\n          setIsCopied(false)\n        }, 4000)\n      })\n    }\n  }\n\n  return (\n    <Wrapper>\n      <ScoreWrapper>\n        <ColorInputs>\n          <div style={{ width: '100%' }}>\n            <ColorInputWrapper>\n              <Input\n                label=\"Foreground Color\"\n                placeholder=\"#000000\"\n                value={valueA}\n                onChange={e => {\n                  if (e.target.value.length <= 7) handleInput(e.target.value, 'A')\n                }}\n              />\n              <ColorPicker\n                aria-label=\"Foreground color picker\"\n                role=\"button\"\n                value={valueA}\n                valueColor={valueA}\n                onClick={() => setIsPickerAOpen(!isPickerAOpen)}\n              />\n              {isPickerAOpen && (\n                <div className=\"popover\">\n                  <HexColorPicker\n                    color={valueA}\n                    onChange={color => setValueA(color)}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === 'Escape') setIsPickerAOpen(false)\n                    }}\n                  />\n                  <CloseButton\n                    role=\"button\"\n                    aria-label=\"Close color picker\"\n                    src={CrossIcon}\n                    onClick={() => setIsPickerAOpen(false)}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === 'Escape') setIsPickerAOpen(false)\n                    }}\n                  >\n                    <CloseIcon alt=\"\" src={CrossIcon} />\n                  </CloseButton>\n                </div>\n              )}\n            </ColorInputWrapper>\n            <LuminosityInputWrapper>\n              <img src={contrastIcon} alt=\"luminosity icon\" width=\"18\" height=\"18\" />\n              <Luminosity\n                value={luminosityA}\n                type=\"range\"\n                aria-label=\"Foreground color luminosity slider\"\n                onChange={e => handleLuminosity(e.target.value, 'A')}\n                min=\"0\"\n                max=\"100\"\n                onMouseUp={e => e.currentTarget.blur()}\n              />\n            </LuminosityInputWrapper>\n          </div>\n          <SwapButton\n            onClick={() => {\n              setValueA(valueB)\n              setValueB(valueA)\n            }}\n            type=\"button\"\n          >\n            <SwapBtnIcon src={swapIcon} alt=\"\" width=\"24\" />\n            <Text tinyBody color=\"gray700\">\n              Swap Colors\n            </Text>\n          </SwapButton>\n          <div style={{ width: '100%' }}>\n            <ColorInputWrapper>\n              <Input\n                label=\"Background Color\"\n                placeholder=\"#FFFFFF\"\n                value={valueB}\n                onChange={e => {\n                  if (e.target.value.length <= 7) handleInput(e.target.value, 'B')\n                }}\n              />\n              <ColorPicker\n                aria-label=\"Background color picker\"\n                role=\"button\"\n                value={valueB}\n                valueColor={valueB}\n                onClick={() => setIsPickerBOpen(!isPickerBOpen)}\n              />\n              {isPickerBOpen && (\n                <div className=\"popover\">\n                  <HexColorPicker\n                    color={valueB}\n                    onChange={color => setValueB(color)}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === 'Escape') setIsPickerBOpen(false)\n                    }}\n                  />\n                  <CloseButton\n                    role=\"button\"\n                    aria-label=\"Close color picker\"\n                    src={CrossIcon}\n                    onClick={() => setIsPickerBOpen(false)}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter' || e.key === 'Escape') setIsPickerBOpen(false)\n                    }}\n                  >\n                    <CloseIcon alt=\"\" src={CrossIcon} />\n                  </CloseButton>\n                </div>\n              )}\n            </ColorInputWrapper>\n            <LuminosityInputWrapper>\n              <img src={contrastIcon} alt=\"luminosity icon\" width=\"18\" height=\"18\" />\n              <Luminosity\n                type=\"range\"\n                aria-label=\"Background color luminosity slider\"\n                value={luminosityB}\n                onChange={e => handleLuminosity(e.target.value, 'B')}\n                onMouseUp={e => e.currentTarget.blur()}\n                min=\"0\"\n                max=\"100\"\n              />\n            </LuminosityInputWrapper>\n          </div>\n        </ColorInputs>\n        <OverviewPreview contentColor={valueA} backgroundColor={valueB} grayscale={grayscale}>\n          <Text role=\"heading\" aria-level=\"2\" smallCaps>\n            Preview:\n          </Text>\n          <PersonIcon fill={valueA} />\n          <Text heading3 center>\n            How Does This Work?\n          </Text>\n          <Text center smallBody>\n            The more contrast you have between your text and UI elements and background colors, the more accessible it\n            is for everyone.\n          </Text>\n        </OverviewPreview>\n        <Ratio>\n          <Text color=\"gray700\" smallBodyHeavy role=\"heading\" aria-level=\"2\">\n            Your Ratio\n          </Text>\n          <Text color=\"gray700\" tinyBody aria-hidden=\"true\">\n            {pass === false ? 'Your colors do not meet WCAG requirements' : 'Your colors meet WCAG requirements'}\n          </Text>\n          <TwoCol>\n            <RatioText aria-hidden=\"true\">\n              {ratio}\n              <span>:1</span>\n            </RatioText>\n            <Tag text={level} color={level === 'POOR' || level === 'OKAY' ? 'red' : 'green'} ariaHidden />\n          </TwoCol>\n          <Button\n            text={isCopied ? 'Copied to clipboard!' : 'Share link to your results'}\n            buttonType=\"secondary\"\n            onClick={handleShare}\n            aria-live=\"polite\"\n          />\n          <div className=\"sr-only\" aria-live=\"polite\">\n            <p>{`Your ratio is ${ratio}:1. ${\n              pass === false\n                ? `Your colors do not meet WCAG requirements. ${level}.`\n                : `Your colors meet WCAG requirements. ${level}. `\n            }`}</p>\n            <p>{`Small text compliance level AA ${ratio >= 4.5 ? 'pass' : 'fail'}. Small text compliance level AAA ${\n              ratio >= 7 ? 'pass' : 'fail'\n            }.`}</p>\n            <p>{`Large text compliance level AA ${ratio >= 3 ? 'pass' : 'fail'}. Large text compliance level AAA ${\n              ratio >= 4.5 ? 'pass' : 'fail'\n            }.`}</p>\n          </div>\n        </Ratio>\n        <ComplianceLevel>\n          <Text color=\"gray700\" smallBodyHeavy role=\"heading\" aria-level=\"2\">\n            Your Compliance\n          </Text>\n          <Space height={8} tabletHeight={0} />\n          <Text heading4 aria-level=\"3\">\n            Small Text\n          </Text>\n          <SubTwoCol>\n            <SmallTwoCol>\n              <Text tinyBody>Level AA</Text>\n              <Tag\n                text={ratio >= 4.5 ? 'pass' : 'fail'}\n                color={ratio >= 4.5 ? 'green' : 'red'}\n                size=\"small\"\n                fontSize=\"tinyBody\"\n              />\n            </SmallTwoCol>\n            <SmallTwoCol>\n              <Text tinyBody>Level AAA</Text>\n              <Tag\n                text={ratio >= 7 ? 'pass' : 'fail'}\n                color={ratio >= 7 ? 'green' : 'red'}\n                size=\"small\"\n                fontSize=\"tinyBody\"\n              />\n            </SmallTwoCol>\n          </SubTwoCol>\n          <Space height={16} />\n          <Text heading4 aria-level=\"3\">\n            Large Text\n          </Text>\n          <SubTwoCol>\n            <SmallTwoCol>\n              <Text tinyBody>Level AA</Text>\n              <Tag\n                text={ratio >= 3 ? 'pass' : 'fail'}\n                color={ratio >= 3 ? 'green' : 'red'}\n                size=\"small\"\n                fontSize=\"tinyBody\"\n              />\n            </SmallTwoCol>\n            <SmallTwoCol>\n              <Text tinyBody>Level AAA</Text>\n              <Tag\n                text={ratio >= 4.5 ? 'pass' : 'fail'}\n                color={ratio >= 4.5 ? 'green' : 'red'}\n                size=\"small\"\n                fontSize=\"tinyBody\"\n              />\n            </SmallTwoCol>\n          </SubTwoCol>\n        </ComplianceLevel>\n        <GrayscaleControl>\n          <GrayscaleToggle\n            role=\"checkbox\"\n            onClick={() => setGrayscale(!grayscale)}\n            grayscale={grayscale}\n            aria-checked={grayscale}\n            aria-labelledby=\"grayscale-label\"\n          />\n          <Text smallBodyHeavy id=\"grayscale-label\">\n            Preview Colors in Grayscale\n          </Text>\n        </GrayscaleControl>\n        <RatioScale>\n          <Text color=\"gray700\" smallBodyHeavy style={{ gridRow: '1 / 2' }} role=\"heading\" aria-level=\"2\">\n            Contrast Ratio Scale\n          </Text>\n          <Tooltip text=\"Contrast ratio refers to how bright or dark colors appear on screens. The more scientific definition is that contrast is a ratio of the luminance of the brightest color to the darkest color that the system can produce. Contrast ratios range from 1 to 21 (written as 1:1 and 21:1). The first number, L1, refers to the relative luminance of light colors while L2 is the second number that refers to the relative luminance of dark colors.\" />\n          <ScaleGradientWrapper>\n            <LowWrapper>\n              <img src={errorIcon} alt=\"\" width=\"20\" />\n              <Text color=\"grey700\" smallCapsSans>\n                LOW\n              </Text>\n            </LowWrapper>\n            <ScaleGradientRange>\n              <ScaleGradientFill ratio={Math.floor((ratio / 21) * 100)} />\n              <YourScoreBox ratio={Math.floor((ratio / 21) * 100)}>\n                <Text color=\"white\" tinyBody>\n                  Your Ratio\n                </Text>\n                <Text color=\"white\" bodyHeavy>\n                  {ratio}:1\n                </Text>\n              </YourScoreBox>\n            </ScaleGradientRange>\n            <HighWrapper>\n              <img src={greenCheckIcon} alt=\"\" width=\"20\" />\n              <Text color=\"grey700\" smallCapsSans>\n                HIGH\n              </Text>\n            </HighWrapper>\n            <RatingWrapper>\n              <Rating>\n                <Text tinyBody color=\"gray700\">\n                  1\n                </Text>\n              </Rating>\n              <Rating>\n                <Text tinyBody color=\"gray700\">\n                  3\n                </Text>\n              </Rating>\n              <Rating>\n                <Text tinyBody color=\"gray700\">\n                  4.5\n                </Text>\n              </Rating>\n              <Rating>\n                <Text tinyBody color=\"gray700\">\n                  7\n                </Text>\n              </Rating>\n              <Rating5>\n                <Text tinyBody color=\"gray700\">\n                  21\n                </Text>\n              </Rating5>\n            </RatingWrapper>\n          </ScaleGradientWrapper>\n        </RatioScale>\n      </ScoreWrapper>\n      <BG className=\"bg\" />\n    </Wrapper>\n  )\n}\n\nexport default ContrastChecker\n"],"names":["Wrapper","BG","theme","ScoreWrapper","Card","ColorInputs","ColorInputWrapper","colorPickerCard","ColorPicker","p","valueColor","CloseButton","CloseIcon","SwapButton","SwapBtnIcon","OverviewPreview","backgroundColor","grayscale","contentColor","Ratio","shareIconPurple","shareIconOffBlack","RatioText","Text","TwoCol","SmallTwoCol","SubTwoCol","ComplianceLevel","GrayscaleControl","GrayscaleToggle","RatioScale","ScaleGradientWrapper","ScaleGradientRange","ScaleGradientFill","ratio","LowWrapper","HighWrapper","RatingWrapper","Rating","Rating5","YourScoreBox","pointerCardIcon","rightPointerCardIcon","LuminosityInputWrapper","Luminosity","useState","setRatio","level","setLevel","pass","setPass","valueA","setValueA","valueB","setValueB","luminosityA","setLuminosityA","luminosityB","setLuminosityB","setGrayscale","isPickerAOpen","setIsPickerAOpen","isPickerBOpen","setIsPickerBOpen","isCopied","setIsCopied","windowGlobal","window","useEffect","url","URL","location","params","URLSearchParams","search","foregroundColor","get","length","hslA","hexToHSL","hslB","luminosityValA","split","luminosityValB","a","b","newRatio","Contrast","toString","prettyRatio","substring","determineLevel","handleInput","input","aOrB","RegExp","test","handleLuminosity","val","hslVal","newHsl","hslToHex","contrastRatio","copyTextToClipboard","text","navigator","href","clipboard","writeText","document","execCommand","style","width","label","placeholder","value","onChange","e","target","role","onClick","className","color","onKeyDown","key","src","CrossIcon","alt","contrastIcon","height","type","min","max","onMouseUp","currentTarget","blur","swapIcon","tinyBody","smallCaps","fill","heading3","center","smallBody","smallBodyHeavy","ariaHidden","buttonType","queryParams","set","history","replaceState","then","setTimeout","tabletHeight","heading4","size","fontSize","id","gridRow","errorIcon","smallCapsSans","Math","floor","bodyHeavy","greenCheckIcon"],"sourceRoot":""}