1) [webkit] › packages/ui/tests/e2e/components.spec.ts:200:2 › Roxy UI preview › passes axe-core a11y on dark theme Error: [ { "id": "color-contrast", "impact": "serious", "tags": [ "cat.color", "wcag2aa", "wcag143", "TTv5", "TT13.c", "EN-301-549", "EN-9.1.4.3", "ACT", "RGAAv4", "RGAA-3.2.1" ], "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds", "help": "Elements must meet minimum color contrast ratio thresholds", "helpUrl": "https://dequeuniversity.com/rules/axe/4.11/color-contrast?application=playwright", "nodes": [ { "any": [ { "id": "color-contrast", "data": { "fgColor": "#b45309", "bgColor": "#18181b", "contrastRatio": 3.52, "fontSize": "10.5pt (14px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<div class=\"wrap\" aria-label=\"Transits\">", "target": [ [ "#transits", "div[aria-label=\"Transits\"]" ] ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 3.52 (foreground color: #b45309, background color: #18181b, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<button type=\"button\" class=\"roxy-tab\" role=\"tab\" id=\"transits-tab-positions\" aria-selected=\"true\" aria-controls=\"transits-panel-positions\" tabindex=\"0\"><!--?lit$556375496$-->Positions</button>", "target": [ [ "#transits", "#transits-tab-positions" ] ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.52 (foreground color: #b45309, background color: #18181b, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#71717a", "bgColor": "#18181b", "contrastRatio": 3.66, "fontSize": "10.5pt (14px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<div class=\"wrap\" aria-label=\"Transits\">", "target": [ [ "#transits", "div[aria-label=\"Transits\"]" ] ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 3.66 (foreground color: #71717a, background color: #18181b, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<button type=\"button\" class=\"roxy-tab\" role=\"tab\" id=\"transits-tab-aspects\" aria-selected=\"false\" tabindex=\"-1\"><!--?lit$556375496$-->Aspects (73)</button>", "target": [ [ "#transits", "#transits-tab-aspects" ] ], "failureSummary": "Fix a