Accessibility issues in Authorization Profile Page

Description: Ensures the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds

Helpurl: https://dequeuniversity.com/rules/axe/4.7/color-contrast-enhanced?application=axeAPI

[
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#1a202c",
"bgColor": "#5c96ba",
"contrastRatio": 5.07,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "

",
"target": [
".css-aut90i"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "",
"target": [
".css-1pd2iu3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#1a5a96",
"bgColor": "#f1f1f1",
"contrastRatio": 6.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.3 (foreground color: #1a5a96, background color: #f1f1f1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Namespaces (ccplatform)",
"target": [
".css-5yp7oh"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.3 (foreground color: #1a5a96, background color: #f1f1f1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Authorization",
"target": [
"#tabs-129--tab-1"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Client Management",
"target": [
"#tabs-129--tab-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#1a202c",
"bgColor": "#5c96ba",
"contrastRatio": 5.07,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "

WF

",
"target": [
".css-f5o0f9"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "",
"target": [
".css-uo84k3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "•IDIR",
"target": [
".css-16rfl8x"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "

wendy@test.com

",
"target": [
".css-1jusl6t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Client Credential Flow, using Client ID and Secret",
"target": [
".chakra-radio.css-78joka:nth-child(1) > .chakra-radio__label.css-1i8vu1i"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Client Credential Flow, using signed JWT with Generated Key Pair",
"target": [
".chakra-radio__label.css-1i8vu1i[data-checked=\"\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "13.5pt (18px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Client Credential Flow, using signed JWT with JWKS URL",
"target": [
".chakra-radio.css-78joka:nth-child(3) > .chakra-radio__label.css-1i8vu1i"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "client-credentials",
"target": [
".css-722v25.chakra-text:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "authorization-code",
"target": [
".css-722v25.chakra-text:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 7:1"
}
]


************************************************************************************
Description: Ensures the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds

Helpurl: https://dequeuniversity.com/rules/axe/4.7/color-contrast-enhanced?application=axeAPI

[
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#1a202c",
"bgColor": "#5c96ba",
"contrastRatio": 5.07,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "

",
"target": [
".css-aut90i"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "",
"target": [
".css-1pd2iu3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#1a5a96",
"bgColor": "#f1f1f1",
"contrastRatio": 6.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.3 (foreground color: #1a5a96, background color: #f1f1f1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Namespaces (ccplatform)",
"target": [
".css-5yp7oh"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.3 (foreground color: #1a5a96, background color: #f1f1f1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#545a61",
"bgColor": "#ffffff",
"contrastRatio": 6.97,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.97 (foreground color: #545a61, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Authentication",
"target": [
"#tabs-129--tab-0"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.97 (foreground color: #545a61, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "Client Management",
"target": [
"#tabs-129--tab-2"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#1a202c",
"bgColor": "#5c96ba",
"contrastRatio": 5.07,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "

WF

",
"target": [
".css-f5o0f9"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "",
"target": [
".css-uo84k3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 5.07 (foreground color: #1a202c, background color: #5c96ba, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "•IDIR",
"target": [
".css-16rfl8x"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "

wendy@test.com

",
"target": [
".css-1jusl6t"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1"
},
{
"any": [
{
"id": "color-contrast-enhanced",
"data": {
"fgColor": "#606060",
"bgColor": "#ffffff",
"contrastRatio": 6.28,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "7:1"
},
"relatedNodes": [
{
"html": "",
"target": [
"#chakra-modal-24"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "

If your APIs are protected by Scope, then provide the full list of Scopes setup in the IdP.

",
"target": [
"fieldset:nth-child(2) > .css-1hgk0i8"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 6.28 (foreground color: #606060, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1"
}
]