{
"wide": [
{
"approvedRole": "audit source-path label",
"finding": {
"rule": "color-contrast",
"target": [
"section[data-audit-item=\"typography\"] > header > .design-audit-source"
],
"html": "packages/visuals/theme.css",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(1) > .design-audit-type-label > span"
],
"html": "Small metadata",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(1) > .design-audit-type-label > code"
],
"html": "11.3–11.5px · step −2.5",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(2) > .design-audit-type-label > span"
],
"html": "Compact controls",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(2) > .design-audit-type-label > code"
],
"html": "12–12.3px · step −2",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(3) > .design-audit-type-label > span"
],
"html": "Interface and chat",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(3) > .design-audit-type-label > code"
],
"html": "13.4–14px · step −1",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(4) > .design-audit-type-label > span"
],
"html": "Document prose",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(4) > .design-audit-type-label > code"
],
"html": "15–16px · step 0",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(5) > .design-audit-type-label > span"
],
"html": "Subheading",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(5) > .design-audit-type-label > code"
],
"html": "18.8–20.8px · step +2",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(6) > .design-audit-type-label > span"
],
"html": "Section heading",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(6) > .design-audit-type-label > code"
],
"html": "21.1–23.7px · step +3",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(7) > .design-audit-type-label > span"
],
"html": "Document title",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(7) > .design-audit-type-label > code"
],
"html": "26.4–30.8px · step +5",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.5pt (14.0351px), font weight: normal). Expected contrast ratio of 4.5:1"
}
}
],
"narrow": [
{
"approvedRole": "audit source-path label",
"finding": {
"rule": "color-contrast",
"target": [
"section[data-audit-item=\"typography\"] > header > .design-audit-source"
],
"html": "packages/visuals/theme.css",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(1) > .design-audit-type-label > span"
],
"html": "Small metadata",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(1) > .design-audit-type-label > code"
],
"html": "11.3–11.5px · step −2.5",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(2) > .design-audit-type-label > span"
],
"html": "Compact controls",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(2) > .design-audit-type-label > code"
],
"html": "12–12.3px · step −2",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(3) > .design-audit-type-label > span"
],
"html": "Interface and chat",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(3) > .design-audit-type-label > code"
],
"html": "13.4–14px · step −1",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(4) > .design-audit-type-label > span"
],
"html": "Document prose",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(4) > .design-audit-type-label > code"
],
"html": "15–16px · step 0",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(5) > .design-audit-type-label > span"
],
"html": "Subheading",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(5) > .design-audit-type-label > code"
],
"html": "18.8–20.8px · step +2",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(6) > .design-audit-type-label > span"
],
"html": "Section heading",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(6) > .design-audit-type-label > code"
],
"html": "21.1–23.7px · step +3",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(7) > .design-audit-type-label > span"
],
"html": "Document title",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
},
{
"approvedRole": "audit type-scale metadata",
"finding": {
"rule": "color-contrast",
"target": [
"div:nth-child(7) > .design-audit-type-label > code"
],
"html": "26.4–30.8px · step +5",
"evidence": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #78766e, background color: #f4f4f1, font size: 10.1pt (13.4107px), font weight: normal). Expected contrast ratio of 4.5:1"
}
}
]
}