[
  {
    "label": "Color",
    "rules": {
      "color-contrast": {
        "id": "color-contrast",
        "impact": "serious",
        "tags": [
          "cat.color",
          "wcag2aa",
          "wcag143"
        ],
        "description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
        "help": "Elements must have sufficient color contrast",
        "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axe-puppeteer",
        "nodes": [
          {
            "any": [
              {
                "id": "color-contrast",
                "data": {
                  "fgColor": "#969696",
                  "bgColor": "#ffffff",
                  "contrastRatio": 2.95,
                  "fontSize": "8.3pt",
                  "fontWeight": "normal",
                  "expectedContrastRatio": "4.5:1"
                },
                "relatedNodes": [
                  {
                    "html": "<div class=\"chrome-picker \" style=\"background: rgb(255, 255, 255); border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px; box-sizing: initial; width: 225px; font-family: Menlo;\">",
                    "target": [
                      ".chrome-picker"
                    ]
                  }
                ],
                "impact": "serious",
                "message": "Element has insufficient color contrast of 2.95 (foreground color: #969696, background color: #ffffff, font size: 8.3pt, font weight: normal). Expected contrast ratio of 4.5:1"
              }
            ],
            "all": [],
            "none": [],
            "impact": "serious",
            "html": "<span style=\"text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;\">hex</span>",
            "target": [
              ".flexbox-fix > div > div > span"
            ],
            "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #969696, background color: #ffffff, font size: 8.3pt, font weight: normal). Expected contrast ratio of 4.5:1"
          }
        ],
        "pass": false,
        "cat": "cat.color"
      }
    }
  },
  {
    "label": "Forms",
    "rules": {
      "form-field-multiple-labels": {
        "id": "form-field-multiple-labels",
        "impact": null,
        "tags": [
          "cat.forms",
          "wcag2a",
          "wcag332"
        ],
        "description": "Ensures form field does not have multiple label elements",
        "help": "Form field must not have multiple label elements",
        "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/form-field-multiple-labels?application=axe-puppeteer",
        "nodes": [
          {
            "any": [],
            "all": [],
            "none": [
              {
                "id": "multiple-label",
                "data": null,
                "relatedNodes": [],
                "impact": "moderate",
                "message": "Form field does not have multiple label elements"
              }
            ],
            "impact": null,
            "html": "<input spellcheck=\"false\" value=\"#00BB77\" style=\"font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;\">",
            "target": [
              "input"
            ]
          }
        ],
        "pass": true,
        "cat": "cat.forms"
      },
      "label-title-only": {
        "id": "label-title-only",
        "impact": null,
        "tags": [
          "cat.forms",
          "best-practice"
        ],
        "description": "Ensures that every form element is not solely labeled using the title or aria-describedby attributes",
        "help": "Form elements should have a visible label",
        "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/label-title-only?application=axe-puppeteer",
        "nodes": [
          {
            "any": [],
            "all": [],
            "none": [
              {
                "id": "title-only",
                "data": null,
                "relatedNodes": [],
                "impact": "serious",
                "message": "Form element does not solely use title attribute for its label"
              }
            ],
            "impact": null,
            "html": "<input spellcheck=\"false\" value=\"#00BB77\" style=\"font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;\">",
            "target": [
              "input"
            ]
          }
        ],
        "pass": true,
        "cat": "cat.forms"
      },
      "label": {
        "id": "label",
        "impact": "critical",
        "tags": [
          "cat.forms",
          "wcag2a",
          "wcag332",
          "wcag131",
          "section508",
          "section508.22.n"
        ],
        "description": "Ensures every form element has a label",
        "help": "Form elements must have labels",
        "helpUrl": "https://dequeuniversity.com/rules/axe/3.2/label?application=axe-puppeteer",
        "nodes": [
          {
            "any": [
              {
                "id": "aria-label",
                "data": null,
                "relatedNodes": [],
                "impact": "serious",
                "message": "aria-label attribute does not exist or is empty"
              },
              {
                "id": "aria-labelledby",
                "data": null,
                "relatedNodes": [],
                "impact": "serious",
                "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
              },
              {
                "id": "implicit-label",
                "data": null,
                "relatedNodes": [],
                "impact": "critical",
                "message": "Form element does not have an implicit (wrapped) <label>"
              },
              {
                "id": "explicit-label",
                "data": null,
                "relatedNodes": [],
                "impact": "critical",
                "message": "Form element does not have an explicit <label>"
              },
              {
                "id": "non-empty-title",
                "data": null,
                "relatedNodes": [],
                "impact": "serious",
                "message": "Element has no title attribute or the title attribute is empty"
              }
            ],
            "all": [],
            "none": [],
            "impact": "critical",
            "html": "<input spellcheck=\"false\" value=\"#00BB77\" style=\"font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;\">",
            "target": [
              "input"
            ],
            "failureSummary": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty"
          }
        ],
        "pass": false,
        "cat": "cat.forms"
      }
    }
  }
]