Color contrast in admin and claro

This accessibility report flags a serious violation of WCAG 1.4.3 (Contrast Minimum) affecting the primary "Apply to selected items" submit button across multiple Drupal administrative pages. The current color combination of white text (#ffffff) on a blue background (#3371ff) yields a contrast ratio of 4.24:1, which falls short of the required 4.5:1 threshold for normal-sized text. This deficiency primarily impacts users with low vision or color blindness, making it difficult for them to read the button's label and navigate the interface effectively. To achieve compliance, the CSS must be updated to either darken the background color or lighten the foreground to ensure the contrast ratio meets or exceeds the Level AA standard.

Note: AI was used to create the scripts that created this scanner and the corresponding report.

I'm adding this, but I expect it has already been covered.

Pattern ID: DRU-44C01FEA
Rule: axe-core - color-contrast
Axe Rule URL: https://dequeuniversity.com/rules/axe/4.11/color-contrast
Severity: High (axe impact: serious)
WCAG SC: 1.4.3 - Contrast (Minimum) (Level AA)
Frequency: 24 of 452 pages (5%)
Selector: #edit-submit
XPath: //[@id="edit-submit"]
*Parent Context: N/A

Affected URLs (full list):

• https://drupal-core.ddev.site/admin/content
• /admin/people

Conditions:

• admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)

HTML Snippet

&lt;input <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"button--small button button--primary js-form-submit form-submit"</span> data-drupal-selector=<span class="hljs-string">"edit-submit"</span> <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"submit"</span> id=<span class="hljs-string">"edit-submit"</span> name=<span class="hljs-string">"op"</span> value=<span class="hljs-string">"Apply to selected items"</span>&gt;

Description

Fix any of the following:
Element has insufficient color contrast of 4.24 (foreground color: #ffffff, background color: #3371ff, font size: 9.5pt (12.64px), font weight: bold). Expected contrast ratio of 4.5:1

Steps to Reproduce

1. Go to https://drupal-core.ddev.site/admin/content
2. Use the matching context from Conditions: admin (dark desktop, dark mobile, light desktop, light mobile), claro (dark desktop, dark mobile, light desktop, light mobile)
3. Open browser DevTools and run axe.run() in the Console.
4. Confirm rule color-contrast on selector #edit-submit.

Expected Behaviour

Element and interaction meet the mapped WCAG success criterion.

Actual Behaviour

Fix any of the following:
Element has insufficient color contrast of 4.24 (foreground color: #ffffff, background color: #3371ff, font size: 9.5pt (12.64px), font weight: bold). Expected contrast ratio of 4.5:1

Impact

low-vision

Suggested Fix

Check foreground/background color combinations. Ensure ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text (18pt or 14pt bold). Update the relevant CSS file.

Additional References

• Deque Axe Rule: https://dequeuniversity.com/rules/axe/4.11/color-contrast
• WCAG Understanding: https://www.w3.org/WAI/WCAG22/Understanding/143.html
• ACCESSIBILITY.md Trusted Sources: https://mgifford.github.io/ACCESSIBILITY.md/examples/TRUSTED_SOURCES.yaml
• DWP - Colour and contrast: https://accessibility-manual.dwp.gov.uk/tools-and-resources/colour-and-contrast
• Search related Drupal accessibility issues (rule + selector/template): https://www.drupal.org/project/issues/search?text=color-contrast%20edit-submit&projects=Drupal+core&assigned=&submitted=&project_issue_followers=&status%5B%5D=Open&issue_tags_op=%3D&issue_tags=Accessibility

Testing Environment

• Browser: Chromium (via Playwright)
• OS: macOS
• Tool: axe-core via @axe-core/playwright
• Base URL: https://drupal-core.ddev.site

Tracking IDs

• Pattern ID: DRU-44C01FEA
• Instance IDs: INS-FF0DA1EB, INS-2484DC91, INS-C1A3581E, INS-4A227943, INS-71EFBE79, INS-CEE7A7E5, INS-599E4E6F, INS-D6C3D79C, INS-4FF78378, INS-15BCDDA4, INS-DE80BAA9, INS-F76983F2, INS-2F192593, INS-A658A5E7, INS-BE832DAC, INS-32A7C8C3, INS-CC4E5B84, INS-4F001513, INS-57557F7B, INS-1E91D181, INS-E4C3D7C6, INS-C6066AD3, INS-B74E58E8, INS-1763A2E3